From 030b7a5f3f6e21297b26885115cefa861524c5a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8D=89=E9=9E=8B=E6=B2=A1=E5=8F=B7?= <308487730@qq.com> Date: Sat, 15 May 2021 14:53:43 +0800 Subject: [PATCH] refactor: build with console.log electron --- package.json | 5 +-- script/.rollup.config.esbuild.ts | 60 ++++++++++++++++++++++++++++++++ script/build-main.ts | 8 ++--- script/rollup.config.ts | 34 ++++-------------- src/render/main.ts | 9 +++-- tsconfig.json | 1 + vite.config.ts | 15 ++++++-- yarn.lock | 28 +++++++++------ 8 files changed, 112 insertions(+), 48 deletions(-) create mode 100644 script/.rollup.config.esbuild.ts diff --git a/package.json b/package.json index 0e95227..9af7003 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "electron-vue", "version": "0.0.1", - "main": "dist/main/_.js", + "main": "dist/main/index.js", "author": "草鞋没号 <308487730@qq.com>", "license": "MIT", "scripts": { @@ -56,9 +56,10 @@ }, "devDependencies": { "@rollup/plugin-alias": "^3.1.2", - "@rollup/plugin-commonjs": "^18.0.0", + "@rollup/plugin-commonjs": "^19.0.0", "@rollup/plugin-json": "^4.1.0", "@rollup/plugin-node-resolve": "^11.2.1", + "@rollup/plugin-typescript": "^8.2.1", "@types/minimist": "^1.2.1", "@vitejs/plugin-vue": "^1.2.2", "@vue/compiler-sfc": "^3.0.11", diff --git a/script/.rollup.config.esbuild.ts b/script/.rollup.config.esbuild.ts new file mode 100644 index 0000000..bdefc0a --- /dev/null +++ b/script/.rollup.config.esbuild.ts @@ -0,0 +1,60 @@ +import { join } from 'path' +import { RollupOptions } from 'rollup' +import { nodeResolve } from '@rollup/plugin-node-resolve' +import commonjs from '@rollup/plugin-commonjs' +import esbuild from 'rollup-plugin-esbuild' +import alias from '@rollup/plugin-alias' +import json from '@rollup/plugin-json' +import { builtins } from './utils' + +export default (env = 'production') => { + const options: RollupOptions = { + input: join(__dirname, '../src/main/index.ts'), + output: { + file: join(__dirname, '../dist/main/_.js'), + format: 'cjs', + name: 'ElectronMainBundle', + sourcemap: true, + }, + plugins: [ + nodeResolve({ preferBuiltins: true, browser: true }), // 消除碰到 node.js 模块时⚠警告 + commonjs(), + json(), + esbuild({ + // All options are optional + include: /\.[jt]sx?$/, // default, inferred from `loaders` option + exclude: /node_modules/, // default + // watch: process.argv.includes('--watch'), // rollup 中有配置 + sourceMap: false, // default + minify: env === 'production', + target: 'es2017', // default, or 'es20XX', 'esnext' + jsxFactory: 'React.createElement', + jsxFragment: 'React.Fragment', + // Like @rollup/plugin-replace + define: { + __VERSION__: '"x.y.z"' + }, + tsconfig: 'tsconfig.json', // default + // Add extra loaders + loaders: { + // Add .json files support + // require @rollup/plugin-commonjs + '.json': 'json', + // Enable JSX in .js files too + '.js': 'jsx' + }, + }), + alias({ + entries: [ + { find: '@main', replacement: join(__dirname, '../src/main'), }, + ] + }), + ], + external: [ + ...builtins(), + 'electron', + ], + } + + return options +} diff --git a/script/build-main.ts b/script/build-main.ts index 74cd43c..13485c2 100644 --- a/script/build-main.ts +++ b/script/build-main.ts @@ -16,13 +16,13 @@ import { main } from '../package.json' dotenv.config({ path: join(__dirname, '../.env') }) const argv = minimist(process.argv.slice(2)) -const opt = options(argv.env) +const opts = options(argv.env) const TAG = '[build-main.ts]' const spinner = ora(`${TAG} Electron build...`) if (argv.watch) { waitOn({ port: process.env.PORT as string }).then(msg => { - const watcher = watch(opt) + const watcher = watch(opts) let child: ChildProcess watcher.on('change', filename => { const log = chalk.green(`change -- ${filename}`) @@ -39,11 +39,11 @@ if (argv.watch) { }) } else { spinner.start() - rollup(opt) + rollup(opts) .then(build => { spinner.stop() console.log(TAG, chalk.green('Electron build successed.')) - build.write(opt.output as OutputOptions) + build.write(opts.output as OutputOptions) }) .catch(error => { spinner.stop() diff --git a/script/rollup.config.ts b/script/rollup.config.ts index bdefc0a..98e5f14 100644 --- a/script/rollup.config.ts +++ b/script/rollup.config.ts @@ -1,8 +1,8 @@ import { join } from 'path' import { RollupOptions } from 'rollup' -import { nodeResolve } from '@rollup/plugin-node-resolve' +import nodeResolve from '@rollup/plugin-node-resolve' import commonjs from '@rollup/plugin-commonjs' -import esbuild from 'rollup-plugin-esbuild' +import typescript from '@rollup/plugin-typescript' import alias from '@rollup/plugin-alias' import json from '@rollup/plugin-json' import { builtins } from './utils' @@ -11,42 +11,22 @@ export default (env = 'production') => { const options: RollupOptions = { input: join(__dirname, '../src/main/index.ts'), output: { - file: join(__dirname, '../dist/main/_.js'), + file: join(__dirname, '../dist/main/index.js'), format: 'cjs', name: 'ElectronMainBundle', sourcemap: true, }, plugins: [ - nodeResolve({ preferBuiltins: true, browser: true }), // 消除碰到 node.js 模块时⚠警告 + nodeResolve(), commonjs(), json(), - esbuild({ - // All options are optional - include: /\.[jt]sx?$/, // default, inferred from `loaders` option - exclude: /node_modules/, // default - // watch: process.argv.includes('--watch'), // rollup 中有配置 - sourceMap: false, // default - minify: env === 'production', - target: 'es2017', // default, or 'es20XX', 'esnext' - jsxFactory: 'React.createElement', - jsxFragment: 'React.Fragment', - // Like @rollup/plugin-replace - define: { - __VERSION__: '"x.y.z"' - }, - tsconfig: 'tsconfig.json', // default - // Add extra loaders - loaders: { - // Add .json files support - // require @rollup/plugin-commonjs - '.json': 'json', - // Enable JSX in .js files too - '.js': 'jsx' - }, + typescript({ + module: 'ESNext', }), alias({ entries: [ { find: '@main', replacement: join(__dirname, '../src/main'), }, + { find: '@root', replacement: join(__dirname, '..'), }, ] }), ], diff --git a/src/render/main.ts b/src/render/main.ts index 54e49ed..68b874b 100644 --- a/src/render/main.ts +++ b/src/render/main.ts @@ -1,9 +1,12 @@ import { createApp } from 'vue' import App from './App.vue' -// vite 会编译 import 的形式；所以 electron 及 node.js 内置模块用 require 形式 -const { ipcRenderer } = require('electron') +import { ipcRenderer } from 'electron' +// import Store from 'electron-store' import './index.css' console.log('ipcRenderer:', ipcRenderer) +// console.log('electron-store', new Store({ name: 'electron-vue' })) -createApp(App).mount('#app').$nextTick(window.ClosePreloadLoading) +createApp(App) + .mount('#app') + .$nextTick(window.ClosePreloadLoading) diff --git a/tsconfig.json b/tsconfig.json index c161ad3..6bc2b14 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -12,6 +12,7 @@ "strict": true, "paths": { "@/*": ["src/render/*"], + "@main/*": ["src/main/*"], "@root/*": ["./*"] }, "allowSyntheticDefaultImports": true diff --git a/vite.config.ts b/vite.config.ts index 0122d50..e9835cd 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -3,6 +3,7 @@ require('dotenv').config({ path: join(__dirname, '.env') }) import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { join } from 'path' +import typescript from '@rollup/plugin-typescript' import { builtins } from './script/utils' // https://vitejs.dev/config/ @@ -23,9 +24,19 @@ export default defineConfig({ outDir: join(__dirname, 'dist/render'), emptyOutDir: true, minify: false, - commonjsOptions: {}, - assetsDir: '', // 相对路径加载问题 + commonjsOptions: { + dynamicRequireTargets: [ + join(__dirname, 'package.json'), + ], + }, + assetsDir: '', // 相对路径 加载问题 + sourcemap: true, rollupOptions: { + plugins: [ + // typescript({ + // module: 'ESNext', + // }), + ], external: [ ...builtins(), 'electron', diff --git a/yarn.lock b/yarn.lock index f43e53e..78095d6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -105,10 +105,10 @@ dependencies: slash "^3.0.0" -"@rollup/plugin-commonjs@^18.0.0": - version "18.0.0" - resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-18.0.0.tgz#50dc7518b5aa9e66a270e529ea85115d269825c4" - integrity sha512-fj92shhg8luw7XbA0HowAqz90oo7qtLGwqTKbyZ8pmOyH8ui5e+u0wPEgeHLH3djcVma6gUCUrjY6w5R2o1u6g== +"@rollup/plugin-commonjs@^19.0.0": + version "19.0.0" + resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-19.0.0.tgz#8c3e71f9a66908e60d70cc1be205834ef3e45f71" + integrity sha512-adTpD6ATGbehdaQoZQ6ipDFhdjqsTgpOAhFiPwl+dzre4pPshsecptDPyEFb61JMJ1+mGljktaC4jI8ARMSNyw== dependencies: "@rollup/pluginutils" "^3.1.0" commondir "^1.0.1" @@ -137,6 +137,14 @@ is-module "^1.0.0" resolve "^1.19.0" +"@rollup/plugin-typescript@^8.2.1": + version "8.2.1" + resolved "https://registry.yarnpkg.com/@rollup/plugin-typescript/-/plugin-typescript-8.2.1.tgz#f1a32d4030cc83432ce36a80a922280f0f0b5d44" + integrity sha512-Qd2E1pleDR4bwyFxqbjt4eJf+wB0UKVMLc7/BAFDGVdAXQMCsD4DUv5/7/ww47BZCYxWtJqe1Lo0KVNswBJlRw== + dependencies: + "@rollup/pluginutils" "^3.1.0" + resolve "^1.17.0" + "@rollup/pluginutils@^3.0.8", "@rollup/pluginutils@^3.1.0": version "3.1.0" resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b" @@ -177,9 +185,9 @@ integrity sha512-Q1y515GcOdTHgagaVFhHnIFQ38ygs/kmxdNpvpou+raI9UO3YZcHDngBSYKQklcKlvA7iuQlmIKbzvmxcOE9CQ== "@types/estree@*": - version "0.0.45" - resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.45.tgz#e9387572998e5ecdac221950dab3e8c3b16af884" - integrity sha512-jnqIUKDUqJbDIUxm0Uj7bnlMnRm1T/eZ9N+AVMqhPgzrba2GhGG5o/jCTwmdPK709nEZsGoMzXEDUjcXHa3W0g== + version "0.0.47" + resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.47.tgz#d7a51db20f0650efec24cd04994f523d93172ed4" + integrity sha512-c5ciR06jK8u9BstrmJyO97m+klJrrhCf9u3rLu3DEAJBirxRqSCvDQoYKmxuYwQI5SZChAWu+tq9oVlGRuzPAg== "@types/estree@0.0.39": version "0.0.39" @@ -628,9 +636,9 @@ builder-util@22.10.5: temp-file "^3.3.7" builtin-modules@^3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.1.0.tgz#aad97c15131eb76b65b50ef208e7584cd76a7484" - integrity sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw== + version "3.2.0" + resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.2.0.tgz#45d5db99e7ee5e6bc4f362e008bf917ab5049887" + integrity sha512-lGzLKcioL90C7wMczpkY0n/oART3MbBa8R9OFGE1rJxoVI86u4WAGfEk8Wjv10eKSyTHVGkSo3bvBylCEtk7LA== cacheable-request@^6.0.0: version "6.1.0"