前言

使用Electron打包前端页面进行跨平台开发，可以使用NodeJS本地模块进行开发，以下配置Electron流程。

使用Electron模板

参考自Webpack + Typescripte Electron Forge

npm init electron-app@latest my-new-app -- --template=webpack-typescript

配置SASS

npm install sass sass-loader --save-dev
// if need postcss
npm install postcss postcss-loader postcss-px-to-viewport-8-plugin

• 在webpack.rules.ts下增加：

// webpack.rules.ts
{
    test: /\.(s[ac]ss|css)$/i,
        use: [
            // Creates `style` nodes from JS strings
            { loader: "style-loader" },
            // Translates CSS into CommonJS
            { loader: "css-loader" },
            {
                loader: 'postcss-loader',
                options: {
                    postcssOptions: {
                        ident: "postcss",
                        plugins: [
                            [require('postcss-px-to-viewport-8-plugin')({
                                unitToConvert: 'px',
                                viewportWidth: 360,
                                viewportHeight: 720,
                                unitPrecision: 6,
                                propList: ['*'],
                                viewportUnit: 'vw',
                                fontViewportUnit: 'vw',
                                selectorBlackList: ['ignore'],
                                minPixelValue: 1,
                                mediaQuery: true,
                                replace: true,
                                exclude: [/node_modules/],
                                landscape: false,
                            })],
                        ]
                    }
                }
            },
            // Compiles Sass to CSS
            { loader: "sass-loader" },
        ],
}

• 在webpack.main.config.ts增加.scss和.sass后缀：

// webpack.main.config.ts
resolve: {
        alias: {
            "@": path.resolve(__dirname, "./src")
        },
        extensions: [
            '.js',
            '.ts',
            '.jsx',
            '.tsx',
            '.css',
            '.json',
            '.scss',
            '.sass'
        ],
    },

如果要使用import styles from "./xxx.module.scss"方式引用样式，需要在src/react-app-env.d.ts增加以下内容，因为Electron模板没有自动生成该文件，我们手动创建并填写：

// react-app-env.d.ts
// import styles from "./xxx.module.scss"
​
declare module '*.module.css' {
    const classes: { readonly [key: string]: string };
    export default classes;
}
​
declare module '*.module.scss' {
    const classes: { readonly [key: string]: string };
    export default classes;
}
​
declare module '*.module.sass' {
    const classes: { readonly [key: string]: string };
    export default classes;
}

配置@为引用路径

如果项目要支持Alias路径作为引用路径，需要进行以下配置：

• 在项目的tsconfig.json下增加配置：

// tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  }
}

• 为renderer线程和main线程分别配置好路径:
  renderer :

// webpack.renderer.config.ts
export const rendererConfig: Configuration = {
    module: {
        rules,
    },
    plugins,
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "./src")
        },
        extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.scss'],
    },
};

main：

export const mainConfig: Configuration = {
    /**
     * This is the main entry point for your application, it's the first file
     * that runs in the main process.
     */
    entry: './src/index.ts',
    // Put your normal webpack config below here
    module: {
        rules,
    },
    plugins,
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "./src")
        },
        extensions: [
            '.js',
            '.ts',
            '.jsx',
            '.tsx',
            '.css',
            '.json',
            '.scss',
            '.sass'
        ],
    },
};

• 引用时候如果eslint报错，则安装typescript插件：

npm install eslint-import-resolver-alias eslint-import-resolver-typescript

并在.eslintrc.json配置：

"settings": {
    "import/resolver": {
      "alias": {
        "map": [
          [
            "@",
            "./src"
          ]
        ],
     }
  }
}

配置使用Node.JS

配置使用NodeJS需要在窗口创建时设置，修改创建参数：

    const mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true, // Add this line
            contextIsolation: false //Electron 12+
        },
    });

在测试使用时候仍然会报错：Module not found: Error: Can't resolve 'fs'，那么需要进行webpack的设置：

• 针对渲染进程：

  // webpack.renderer.config.ts
  {
    target: "electron-renderer",
    resolve:...
  }

• 针对主进程：

  // webpack.main.config.ts
  {
    target: "electron-main",
    resolve:...
  }