背景:重复的代码
通过简单的配置,已经能够将 es6 转化成 es5 了,但是这边还存在一个问题,如下:
我们在原有的文件基础上,再引入另外一个 es6 文件。
/** ./src/a.js **/
class A {
getType(){
console.log('A class')
}
}
export default A;
/** ./src/index.js **/
import A from './a';
class Animal {
constructor(type){
this.type = type;
}
getType(){
return this.type;
}
}
const pig = new Animal('猪');
console.log(pig.type);
这时我们在进行打包。结果如下:
比较一下我用红框框出来的函数 _classCallCheck、_createClass,你会发现它们都是一样的,所以这些代码都重复了,实际上我们可以把这些代码提取出来作为公共函数,如何实现如下:
提取公共函数
提取公共函数需要用到两个 npm 包,@babel/plugin-transform-runtime 和 @babel/runtime。
- @babel/runtime 是运行时依赖
- @babel/plugin-transform-runtime 是开发时依赖,这个包依赖@babel/runtime。
安装
```shell //这边注意: //@babel/plugin-transform-runtime 是开发时依赖 //@babel/runtime 是运行时依赖
yarn add @babel/plugin-transform-runtime —dev yarn add @babel/runtime
<a name="zHZSL"></a>
### webpack 配置
只需要在 loader 的 options 配置 plugins 就行。
```javascript
/** ./webpack.config.js **/
//...
let path = require('path');
module.exports = {
//..
modules:{
rules: [
//..
{
test: /\.js$/,
exclude: /node_modules/,
include: path.resolve(__dirname, './src'),
use:[
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-transform-runtime']
}
}
]
}
//..
]
}
//..
}
打包结果
最后我们再看打包后的公共函数,如下:
我们发现 _classCallCheck、_createClass 函数都被单独的抽离了出来,分别在 a.js 和 index.js 中使用,如下: