UNPKG

3.15 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该插件支持更改 babel-loader 的 `test``exclude``query` 配置项:
49
50```javascript
51module.exports = {
52 plugins: [
53 'qunar', {
54 // 通过对象的方式引入插件,可以传入 options
55 name: 'es6',
56 options: {
57 // 更改 es6 配置
58 test: /\.(js)$/, // 默认是 /\.(js|jsx)$/
59 exclude: /node_modules\/(?!(MY_UI)\/).*/, // 默认是 /node_modules/
60 modifyQuery: function(defaultQuery) { // 可查看和编辑 defaultQuery
61 defaultQuery.presets.push('my_preset');
62 defaultQuery.plugins.push('my_plugin');
63 return defaultQuery;
64 }
65 }
66 }
67 ],
68 config: {
69 // ...
70 }
71};
72```
73
74## 插件内置 Webpack 配置(仅供参考)
75
76```javascript
77{
78 module: {
79 loaders: baseConfig.module.loaders.concat([{
80 test: /\.(js|jsx)$/,
81 exclude: /(node_modules)/,
82 loaders: ['happypack/loader']
83 }])
84 },
85 plugins: baseConfig.plugins.concat([
86 new HappyPack({
87 loaders: [
88 {
89 loader: require.resolve('babel-loader'),
90 test: /\.(js|jsx)$/,
91 exclude: /node_modules/,
92 query: {
93 cacheDirectory: true,
94 presets: [
95 'es2015',
96 'es2017',
97 'stage-0',
98 'stage-1',
99 'stage-2',
100 ],
101 plugins: ['transform-es2015-modules-simple-commonjs']
102 }
103 }
104 ],
105 threads: 4,
106 verbose: false,
107 cacheContext: {
108 env: process.env.NODE_ENV
109 },
110 tempDir: path.join(cwd, 'node_modules/.happypack'),
111 cachePath: path.join(cwd, 'node_modules/.happypack/cache--[id].json')
112 })
113 ])
114}
115```