ykit-config-qunar

Features

资源入口从 src 到 dev & prd 的映射
资源 hash 以及 ver 目录结构生成
打包过程中 eslint 检测
SASS 和 LESS 编译处理，内置 postcss
同步代码至开发机（ykit sync）

安装

在项目中执行：

$ npm install @qnpm/ykit-config-qunar --save --registry http://npmrepo.corp.qunar.com/

编辑 ykit.js，引入插件：

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

或者如果需要添加插件的选项，也可以传入一个对象：

module.exports = {
    plugins: [{
        name: 'qunar',
        options: {
            // 插件选项
        }
    }]
    // ...
};

eslint

在编译前执行代码 eslint 检查（如果项目中没有 eslint 配置文件则会自动生成），通过传入 options.eslint 开启：

module.exports = {
    plugins: [{
        name: 'qunar',
        options: {
            eslint: true
        }
    }]
    // ...
};

如果需要的话，也可以通过 options.eslint 传入更多代码检测配置：

module.exports = {
    plugins: [{
        name: 'qunar',
        options: {
            eslint: {
                env: ['local'] // 只在本地环境进行检测，支持 local、dev、prd
                // 还支持 fix、cache、formatter 等 eslint 配置
                // 更多请参考 http://eslint.org/docs/developer-guide/nodejs-api#cliengine
            }
        }
    }]
    // ...
};

postcss(v0.9.0 以上功能)

插件内置了 postcss-loader，如果想使用的话，需要做的就是直接在 modifyWebpackConfig 中添加 postcss 配置。

modifyWebpackConfig: function(baseConfig) {
    baseConfig.postcss = [
        require('autoprefixer')({
            browsers:['last 200 versions']
        })
    ];
    return baseConfig;
}

注意：这里用到了 autoprefixer，你需要提前用 npm 安装在项目中。

sync 命令

sync 命令可将本地 dev 目录下代码上传至指定开发机，以便于联调测试。

由于安全和配置等原因，目前已经不建议使用 sync，请使用 qci 进行前端 dev 发布。文档请参考[联调发布（发布到开发机）][3]。

前置条件

执行 sync 命令之前要确保从本机可直连目标开发机，通过 ssh 命令可验证当前是否可直连，如：

$ ssh yuhao.ju@192.168.237.71

如果没有提示需要密码，而直接登陆至目标开发机，则代表当前已经直连成功。配置直连的方法可以参考该课程的最后一节。

修改配置文件

在 ykit 配置文件中，指定 sync 参数，如：

exports.config = function() {
    return {
        export: [
            //...
        ],
        modifyWebpackConfig: function(baseConfig) {
            // ...
        },
        sync: {
            // 配置 sync 机器的 ip 地址和项目存放路径
            host: "192.168.237.71",
            path: "/home/q/www/qunarzz.com/<project_name>"
            postsync: function() { // 在 sync 成功后执行
                console.log('sync finished!');
            }
        }
    }
};

执行 sync

在项目中执行：

$ ykit sync

第一次 sync 时会要求输入 qunar user id (如 yuhao.ju)，之后就不必再输了。

错误处理

如果 sync 命令遇到错误，按照以下步骤处理：

检查你的开发机是否可以使用 ssh 直连
检查 user id 是否正确（可以使用 ykit config set user xxx 重新设置，如 ykit config set user yuhao.ju）