1 | <h1 style="font-weight: normal"> 使用插件 </h1>
|
2 |
|
3 | Ykit 通过插件来扩展基础配置:
|
4 |
|
5 | ![配置流程](http://ww2.sinaimg.cn/large/6af705b8gw1f8w9jkb8ffj20q308rmxr.jpg)
|
6 |
|
7 | <h2 style="font-weight: normal"> 插件安装与引入 </h2>
|
8 |
|
9 | 插件命名格式均为`ykit-config-{插件名}`,并且目前都是在`@qnpm`域下,在项目中通过 npm 安装插件:
|
10 |
|
11 | ```bash
|
12 | $ sudo npm install @qnpm/ykit-config-{插件名} --registry http://registry.npm.corp.qunar.com/
|
13 | ```
|
14 |
|
15 | 安装插件后无需特殊引入,只要保证项目内的 ykit 配置文件`ykit.{插件名}.js`与使用的插件名对应即可。如安装了插件`@qnpm-ykit-config-qunar`,则配置文件命名为`ykit.qunar.js`。
|
16 |
|
17 | <h2 style="font-weight: normal"> 技术解决方案插件 </h2>
|
18 |
|
19 | 总的来说,插件分为两种,**技术解决方案插件**和**自定义插件**。
|
20 |
|
21 | 技术解决方案插件由 Ykit 提供,以便于快速搭建不同的开发环境:
|
22 |
|
23 | <h3 style="font-weight: normal"> ykit-config-qunar </h3>
|
24 |
|
25 | - 添加 SASS 和 LESS 编译模块。
|
26 | - 实现资源入口从`src`到`prd & dev`的映射。
|
27 | - 添加`ykit sync`命令,同步代码至开发机。
|
28 | - 添加`ykit source`命令,上传静态资源。
|
29 | - 支持引入`fekit_moudles`
|
30 |
|
31 | <h3 style="font-weight: normal"> ykit-config-fekit </h3>
|
32 |
|
33 | - 继承自 ykit-config-qunar。
|
34 | - 兼容 Fekit 模块引用特殊语法(如 CSS 中 require 另一样式文件)。
|
35 |
|
36 | <h3 style="font-weight: normal"> ykit-config-hy </h3>
|
37 |
|
38 | - 继承自 ykit-config-qunar。
|
39 | - 添加 ES6 编译模块。
|
40 | - 添加 ES6 Lint 规则。
|
41 | - 内置 Hy2 (开发中)。
|
42 |
|
43 | <h2 style="font-weight: normal"> 自定义插件 </h2>
|
44 |
|
45 | 自定义插件设计的初衷是**让开发团队针对自身整合一套开发环境**,在其中可以添加/修改编译规则以及编译插件,加入更多开发工具,添加自定义命令,设计团队 lint 规则等等。
|
46 |
|
47 | 自定义插件示例:[ykit-config-qunar][1]。
|
48 |
|
49 | <h2 style="font-weight: normal"> 自定义插件的编写 </h2>
|
50 |
|
51 | **注意:为了使 build 机器(node 0.12)可以正常编译,插件内部必须使用 es5 语法。**
|
52 |
|
53 | 插件主要有三大功能:更改编译中间过程、添加编译回调、自定义命令。
|
54 |
|
55 | <h3 style="font-weight: normal"> 更改编译中间过程 </h3>
|
56 |
|
57 | 编译过程是一个不断更改 webapck 配置的过程,遵循 ykit基础配置 => 插件配置 => 业务配置 的流程。
|
58 |
|
59 | 插件中可以从 `this.config` 获取到当前 webpack 配置,并对其进行修改。
|
60 | 比如为某种后缀文件添加/修改 loader,下面例子修改了 scss 的 loader:
|
61 |
|
62 | ```
|
63 | this.config.module.loaders = this.config.module.loaders.map(function(loader) {
|
64 | // 匹配到之前的并替换
|
65 | if(loader.test.test('.scss')){
|
66 | return {
|
67 | test: /\.(sass|scss)$/,
|
68 | loader: options.ExtractTextPlugin.extract(
|
69 | require.resolve('style-loader'),
|
70 |
|
71 | // 将 loader 替换为自己的
|
72 | require.resolve('css-loader')
|
73 | + '?sourceMap!'
|
74 | + require.resolve('@qnpm/ykit-config-qunar/loaders/sass.js') + '?sourceMap'
|
75 | )
|
76 | }
|
77 | }
|
78 | return loader
|
79 | })
|
80 | ```
|
81 |
|
82 | <h3 style="font-weight: normal"> 添加编译回调 </h3>
|
83 |
|
84 | 编译回调是在整体编译结束后调用的方法。通过 `this.packCallbacks` 添加,如:
|
85 |
|
86 | ```
|
87 | // opt 是 pack 命令后面跟的参数,stats 是编译结束后的结果数据,以下代码输出了每个打包资源的名字。
|
88 | this.packCallbacks.push(function(opt, stats) {
|
89 | if (opt.m || opt.min) {
|
90 | var statsInfo = stats.toJson({
|
91 | errorDetails: false
|
92 | })
|
93 |
|
94 | statsInfo.assets.map(function(asset) {
|
95 | console.log(asset.name)
|
96 | });
|
97 | }
|
98 | })
|
99 | ```
|
100 |
|
101 | <h3 style="font-weight: normal"> 添加自定义命令 </h3>
|
102 |
|
103 | 自定义命令使得在当前项目目录下可以执行一段 node 脚本。通过 `this.commands` 添加,如:
|
104 |
|
105 | ```
|
106 | this.commands.push({
|
107 | name: 'my_command',
|
108 | module: require('./commands/my_command.js')
|
109 | })
|
110 | ```
|
111 |
|
112 | 添加过后,在每个安装了该插件的项目中,就可以执行 ykit my_command 命令了。
|
113 |
|
114 | [1]: http://gitlab.corp.qunar.com/mfe/ykit-config-qunar
|