UNPKG

2.2 kBMarkdownView Raw
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```
20module.exports = {
21 plugins: ['es6']
22 // ...
23};
24```
25
26## babel-polyfill
27
28babel-polyfill 默认是没有引入的,需要根据项目需求手动引入。
29
30### 功能
31
32babel 默认只转换新的 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
39import 'babel-polyfill';
40```
41
42<b class="ykit-tip">
43babel-polyfill 会增大 js 体积(压缩后 80k 左右),请根据项目需求选择是否引入。
44</b>
45
46## 配置项
47
48如果要支持 ie8 请传入配置项:
49
50```javascript
51module.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
66module.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 即可。**