1 | # ykit-config-es6
|
2 |
|
3 | ## Features
|
4 |
|
5 | - 编译 ES6+, JSX 代码(兼容至 IE8)
|
6 | - 通过 happypack 提升编译速度
|
7 | - 添加 babel-polyfill
|
8 |
|
9 | ## 安装
|
10 |
|
11 | 在项目中执行:
|
12 |
|
13 | ```
|
14 | $ npm install ykit-config-es6 --save
|
15 | ```
|
16 |
|
17 | 编辑 `ykit.js`,引入插件即可:
|
18 |
|
19 | ```
|
20 | module.exports = {
|
21 | plugins: ['es6']
|
22 | // ...
|
23 | };
|
24 | ```
|
25 |
|
26 | ## babel-polyfill
|
27 |
|
28 | babel-polyfill 默认是没有引入的,需要根据项目需求手动引入。
|
29 |
|
30 | ### 功能
|
31 |
|
32 | babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API,比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象,以及一些定义在全局对象上的方法(比如 Object.assign )都不会转码。如果需要这些 API 则要手动引入 babel-polyfill。
|
33 |
|
34 | ### 引入
|
35 |
|
36 | 引入 babel-polyfill 需要在入口 js 头部,加入如下一行代码:
|
37 |
|
38 | ```javasciprt
|
39 | import 'babel-polyfill';
|
40 | ```
|
41 |
|
42 | <b class="ykit-tip">
|
43 | babel-polyfill 会增大 js 体积(压缩后 80k 左右),请根据项目需求选择是否引入。
|
44 | </b>
|
45 |
|
46 | ## 配置项
|
47 |
|
48 | 如果要支持 ie8 请传入配置项:
|
49 |
|
50 | ```javascript
|
51 | module.exports = {
|
52 | plugins: [
|
53 | {
|
54 | name: 'es6',
|
55 | options: {
|
56 | ie8: true
|
57 | }
|
58 | }
|
59 | ]
|
60 | };
|
61 | ```
|
62 |
|
63 | 该插件支持更改 babel-loader 的 `test`、`exclude`、`query` 配置项:
|
64 |
|
65 | ```javascript
|
66 | module.exports = {
|
67 | plugins: [
|
68 | 'qunar', {
|
69 | // 通过对象的方式引入插件,可以传入 options
|
70 | name: 'es6',
|
71 | options: {
|
72 | // 更改 es6 配置
|
73 | test: /\.(js)$/, // 默认是 /\.(js|jsx)$/
|
74 | exclude: /node_modules\/(?!(MY_UI)\/).*/, // 默认是 /node_modules/
|
75 | modifyQuery: function(defaultQuery) { // 可查看和编辑 defaultQuery
|
76 | defaultQuery.presets.push('my_preset');
|
77 | defaultQuery.plugins.push('my_plugin');
|
78 | return defaultQuery;
|
79 | }
|
80 | }
|
81 | }
|
82 | ],
|
83 | config: {
|
84 | // ...
|
85 | }
|
86 | };
|
87 | ```
|
88 |
|
89 | **注意:更改 bebal-loader 配置后有可能不会立即生效,此时需要清除一下缓存,重新安装 node_modules 即可。**
|