Modify the tsconfig. Json

Under our project, there is a tsconfig.json file that is used to compile ts in our Web, and we made some changes to it.

  • module: esnext -> CommonJs
{ "compilerOptions": { ... "module": "CommonJS", ... }},Copy the code

Write the Babel script

During dev, we compiled and ran the main process TS in real time using Babel scripts.

  • newscripts/BabelRegister.js :
const path = require('path'); require('@babel/register')({ extensions: ['.es6', '.es', '.jsx', '.js', '.mjs', '.ts', '.tsx'], cwd: path.join(__dirname, '.. '), // script position relative to root});Copy the code
  • Add the dependent
Yarn add @ Babel/[email protected] - DCopy the code
  • New Babel configuration: 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),

    ],

  };

};
Copy the code
  • Add the Babel plugin dependency and copy it directly to package.json for installation.
"devDependencies": { ... @babel/core: "^7.12.9", "@babel/plugin-proposal-class-properties": "^7.12.1", "@babel/plugin-proposal-class-properties": "^ 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 - the strings" : "^ 7.12.1 @", "Babel/plugin - proposal - logical - the 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 -- the 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"}Copy the code

Configure the command for starting the main process

  • Add a cross-platform command package:yarn add cross-env -D
"Cross - env" : "^ 7.0.3",Copy the code
  • Adding a Startup Command
"dev:main": "cross-env NODE_ENV=development electron -r ./scripts/BabelRegister ./electron/main.ts",
Copy the code