ykit-config-yo

该插件是为 Hy2.0 项目量身定制的构建方案和开发服务。

关于 yo 的详细使用说明请查看 Yo 官方文档。

Features

• 支持一键初始化 yo 项目
• 从 js export 中提取 css/scss 依赖并去重合并
• js/css 的开发服务中间件
• 通过动态链接库等方式提升编译构建性能

安装

根据项目需求可选择不同的安装方式。

创建项目

如果要创建新项目，首先创建一个空的项目目录，之后在项目目录下通过 init 命令一键生成脚手架。

$ ykit init yo

为已有项目添加 yo 插件

在项目中执行：

$ npm install ykit-config-yo --save

编辑 ykit.js，引入插件：

module.exports = {
    plugins: ['yo']
    // ...
};

dll 命令

dll 命令是对编译流程的一个优化。

由于 yo 依赖的库和组件很多，为了提升编译性能，我们通过 Webpack 的 DLLPlugin 将这些第三方模块打包成 lib.js，从而提升编译速度并更有效地利用客户端缓存。

构建和发布时插件都会自动调用该命令生成 lib.js，只有我们手动改了库中包含的模块并希望立即生效时才需要手动调用 ykit dll 命令。具体说明详见 Yo 官方文档-关于 lib.js。

另外你也可以调用 ykit dll-min 来生成 production 环境下的 lib.js。这种 lib.js 去除了 React 内部的冗余代码和警告，并且性能要比普通的 lib.js好。可以模拟线上环境App的真实性能。

配置 chunk

一般情况下不需要手动配置 chunk 的 publicPath 和 chunkFilename，如果有这种需求，可以通过如下配置实现：

{
    modifyConfig: function(config) {
        config.output.local.chunkFilename = '[id].chunk.js';
        config.output.local.publicPath = '//' + path.join('q.qunarzz.com', projectDir, 'prd/');
        config.output.dev.chunkFilename = '[id][email protected]';
        config.output.dev.publicPath = '//' + path.join('q.qunarzz.com', projectDir, 'dev/');
        config.output.prd.chunkFilename = '[id].chunk@[chunkhash].js';
        config.output.prd.publicPath = '//' + path.join('q.qunarzz.com', projectDir, 'prd/');
    }
}

其中 local，dev 和 prd 分别对应着本地，开发机和线上环境。

配置lib.js

默认情况下 lib.js 中包含了 React，ReactDOM，Babel-Polyfill，Yo-Router四个依赖，如果你有更多的公用依赖需要打在 lib.js 中 可以通过如下配置实现：

{
    modifyConfig: function(config) {
        config.getVendor = function(vendors) {
            return vendors.concat('newLib');
        }
    }
}

其中参数 vendors 是原有的四个依赖，你可以向其中加入新的 node_modules 中的依赖，也可以加入业务模块，这时候你需要提供一个相对于 src 文件夹 的路径。

插件配置详情

{
    module: {
        loaders: this.config.module.loaders.concat([
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loaders: ['happypack/loader']
            }, {
                test: /\.(scss|css)$/,
                loaders: [require.resolve('./loader/empty-loader')]
            }
        ])
    },
    devtool: 'source-map',
    plugins: this.config.plugins.concat[
        dllPlugin,
        envPlugin,
        happyPackPlugin,
    ]
}