基于React生态、Webpack2工具打造Electron App的样板工程
简介
最近在学习 React 以及其生态产品,在为开发的一个 Electron 应用搭建一套自己熟悉的构建工具。
项目地址: Electron-React-Webpack-Boilerplate
使用它提升了开发效率,完成了StarCabinet - 一个开源的 Github Stars 管理工具
Webpack
我使用了 Webpack 作为模块加载和编译打包的主力,配合各种 loaders。 Webpack 的配置文件分为开发版本和生产版本,共同的部分抽离到 base config 中。
注意点 1
node: {
__filename: false,
__dirname: false
}
上面的配置是在编译时保留__filename
和__dirname
,因为 Electron 运行的 NodeJS 脚本,需要在运行时去解析这个全局变量,如果编译时,会导致解析错误。
注意点 2
target: 'electron-renderer'
这里涉及到 JavaScript 的模块化规范比较多的问题,包括 CommonJS,AMD 等,我使用electron-renderer
,这样 webpack 编译时会做区分,为渲染进程运行的 JS 提供必要插件以使之在浏览器运行,同时也提供插件给主进程的 JS 使之在 Node 环境下顺利执行。
Webpack1 关于此的文档: Webpack1 Target
Webpack2 关于此的文档: Webpack2 Targets
注意点 3
Webpack 的各种 loader,最好使用全名,比如 babel 使用全名 babel-loader。 举个错误的例子:npm 有个包 json-loader,也有个包就叫 json,如果你的 json-loader 写成 json,Webpack 会先选择全字匹配的 json 包作为 loader,当然这会报错。
注意点 4
为各个 entry 添加babel-polyfill
。
因为即使我们写的代码并没有使用 ES6/ES7 草案级的规范语法,但是引用的包可能会。比如Object.entries
这个 ES7 的草案规范语法。需要babel-polyfill
来转译成可 ES5 识别的语法。
CSS 模块
关于 CSS 模块可阅读文章CSS Modules 详解及 React 中实践
这里的问题是,有的 class 我并不需要 css 模块,所以在 webpack 的 css loader 里面,我配置了两项,分别针对 global 的样式和 React 组件内部需要模块化的样式。
{
test: /\.css$/,
include: [/global/, /node_modules/],
loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader?sourceMap!postcss-loader'})
},
{
test: /\.css$/,
exclude: [/global/, /node_modules/],
loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'})
}
Less 或 Sass 同理。
其他
直接参考仓库中Wepack configs
- 原文作者:Touchumind
- 原文链接:https://blog.fedepot.com/post/react-electron-app-sample/
- 版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可,非商业转载请注明出处(作者,原文链接),商业转载请联系作者获得授权。