【Electron 快速入门-5.1】Dev 编译与启动主进程

修改 tsconfig.json

在我们的项目下，存在 tsconfig.json 文件，用于编译我们 web 中的 ts，我们对其做一些改变。

• module: esnext -> CommonJs

{

  "compilerOptions": {

    .​..

    "module": "CommonJS",

    ...

  },

}
复制代码

编写 babel 脚本

在 dev 的时候，我们通过 babel 脚本来进行主进程 ts 的实时编译与运行。

• 新建scripts/BabelRegister.js :

const path = require('path');



require('@babel/register')({

  extensions: ['.es6', '.es', '.jsx', '.js', '.mjs', '.ts', '.tsx'],

  cwd: path.join(__dirname, '..'), // 脚本相对于根目录位置

});
复制代码

• 添加依赖

yarn add @babel/register@7.12.1 -D
复制代码

• 新增 babel 配置: babel.config.js

/* eslint global-require: off, import/no-extraneous-dependencies: off */



const developmentEnvironments = ['development', 'test'];



const developmentPlugins = [require('@babel/plugin-transform-runtime')];



const productionPlugins = [

  require('babel-plugin-dev-expression'),



  // babel-preset-react-optimize

  require('@babel/plugin-transform-react-constant-elements'),

  require('@babel/plugin-transform-react-inline-elements'),

  require('babel-plugin-transform-react-remove-prop-types'),

];



module.exports = (api) => {

  // See docs about api at https://babeljs.io/docs/en/config-files#apicache



  const development = api.env(developmentEnvironments);



  return {

    presets: [

      // @babel/preset-env will automatically target our browserslist targets

      require('@babel/preset-env'),

      require('@babel/preset-typescript'),

      [require('@babel/preset-react'), { development }],

    ],

    plugins: [

      // Stage 0

      require('@babel/plugin-proposal-function-bind'),



      // Stage 1

      require('@babel/plugin-proposal-export-default-from'),

      require('@babel/plugin-proposal-logical-assignment-operators'),

      [require('@babel/plugin-proposal-optional-chaining'), { loose: false }],

      [

        require('@babel/plugin-proposal-pipeline-operator'),

        { proposal: 'minimal' },

      ],

      [

        require('@babel/plugin-proposal-nullish-coalescing-operator'),

        { loose: false },

      ],

      require('@babel/plugin-proposal-do-expressions'),



      // Stage 2

      [require('@babel/plugin-proposal-decorators'), { legacy: true }],

      require('@babel/plugin-proposal-function-sent'),

      require('@babel/plugin-proposal-export-namespace-from'),

      require('@babel/plugin-proposal-numeric-separator'),

      require('@babel/plugin-proposal-throw-expressions'),



      // Stage 3

      require('@babel/plugin-syntax-dynamic-import'),

      require('@babel/plugin-syntax-import-meta'),

      [require('@babel/plugin-proposal-class-properties'), { loose: true }],

      require('@babel/plugin-proposal-json-strings'),



      ...(development ? developmentPlugins : productionPlugins),

    ],

  };

};
复制代码

• 添加 babel 插件依赖， 直接复制到 package.json 进行安装即可。

  "devDependencies": {

 ​   ...

    "@babel/core": "^7.12.9",

    "@babel/plugin-proposal-class-properties": "^7.12.1",

    "@babel/plugin-proposal-decorators": "^7.12.1",

    "@babel/plugin-proposal-do-expressions": "^7.12.1",

    "@babel/plugin-proposal-export-default-from": "^7.12.1",

    "@babel/plugin-proposal-export-namespace-from": "^7.12.1",

    "@babel/plugin-proposal-function-bind": "^7.12.1",

    "@babel/plugin-proposal-function-sent": "^7.12.1",

    "@babel/plugin-proposal-json-strings": "^7.12.1",

    "@babel/plugin-proposal-logical-assignment-operators": "^7.12.1",

    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",

    "@babel/plugin-proposal-optional-chaining": "^7.12.7",

    "@babel/plugin-proposal-pipeline-operator": "^7.12.1",

    "@babel/plugin-proposal-throw-expressions": "^7.12.1",

    "@babel/plugin-syntax-dynamic-import": "^7.8.3",

    "@babel/plugin-syntax-import-meta": "^7.10.4",

    "@babel/plugin-transform-react-constant-elements": "^7.12.1",

    "@babel/plugin-transform-react-inline-elements": "^7.12.1",

    "@babel/plugin-transform-runtime": "^7.12.1",

    "@babel/preset-env": "^7.12.7",

    "@babel/preset-react": "^7.12.7",

    "@babel/preset-typescript": "^7.12.7",

    "babel-plugin-dev-expression": "^0.2.2"

  }
复制代码

配置主进程启动命令

• 添加一个跨平台的命令包: yarn add cross-env -D

"cross-env": "^7.0.3",
复制代码

• 添加启动命令

"dev:main": "cross-env NODE_ENV=development electron -r ./scripts/BabelRegister ./electron/main.ts",
复制代码