基于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