electron 项目踩坑记录「持续更新」

技术方案

目前项目是以sdk形式嵌入其他electron应用，所以暂时不涉及electron-builder

技术栈：

electron + react(桶) + ts + webpack

目录结构：

|- src
    |- main                         // electron 开发目录
        |- preloads                 // preloads 
            - xx.ts                 
        |- sdk                      // node sdk
            |- sdkA
            ...
         - index.ts                 // 主入口
    |- project                      // web应用目录，可以多个
         - index.tsx                // 主入口
         - index.html               // html
        |- src                      // 开发文件
            ...
|- webpack                          // webpack配置入口
    |- utils                        // 工具
        ...
     - constant.ts                  // 常量
     - webpack.config.react.js      // web应用 打包配置
     - webpack.config.electron.js   // electron 打包配置

问题记录

node sdk webpack打包问题

问题产生原因

在引入.node 文件时，webpack打包报错。.node文件是用node-gpy编译后的二进制文件，webpack无法进行打包。

前景摘要 - webpack打包编译产物分析

webpack打包会把`require/import`转成`webpack_require`

模块导入

模块注册

特殊的模块注册

可以看到部分模块是不进行编译的，会直接编译成require('module')

这部分默认不编译的代码，是webpack-config -> target 字段控制的

webpack target

解决思路

1. 编译阶段
   1. 通过loader/plugin 来跳过编译.node 文件
   2. 特殊识别某些代码，不执行编译import/require
2. 编译结束后，copy sdk到dist目录

开发工作量最小的无疑是不执行编译import/require，于是面向百度编程了一天后，找到两个方法。

解决方案

1. __non_webpack_require__

   // 使用方法: 
   // 源代码
   const fs = __non_webpack_require__('fs');
   
   // webpack编译后
   const fs = require('fs');
   

   参考： stackoverflow.com/questions/4… www.coder.work/article/139…

2. webpack配置noParse webpack module.noParse

   // 使用方法：
   // webpack.config
    module: {
       noParse: /\.*native-require.js$/, // 你不想打包的文件
     },
     
   // native-require.js
   // 这部分代码不会被webpack编译
   module.exports = require;
   
   // webpack 编译后产物
   
   /***/ "./src/xxx/native-require.js":
   /*!******************************************!*\
     !*** ./src/xxx/native-require.js ***!
     \******************************************/
   /***/ (function(module, exports) {
   module.exports = require;
   /***/ }),
   

   由于webpack不会打包，所以native-require.js中需要考虑兼容问题。或者先用bable处理一下这个文件

3. node_modules 中的代码不进行打包，直接mv到dist目录下。

因为electron的执行环境是node，所以在不打包node_modules的情况下，可以直接进行require

缺点：需要自行辨别node_modules中你需要的包，如果全都mv过去，则会造成包体积过大。

PS: 当下载量为100w时，每多1m，就多240￥。

阿里云cdn计费

其他方案(未验证)：segmentfault.com/q/101000001…