@babel/plugin-transform-runtime

在common.js文件夹中写上
image.png
打包后, 生成的代码中会重复定义类的转译方法, 这部分是可以提取出来的
image.png

同时, 使用generator, promise语法时, 使用的是内置的api, 但是并没有转化和内置这个api, 会在浏览器中报错:
image.png

因此需要 @babel/plugin-transform-runtime 插件
文档: https://babeljs.io/docs/en/babel-plugin-transform-runtime#docsNav
这仍然是个开发依赖, 安装 yarn add @babel/plugin-transform-runtime -D ;
但是上线时需要依赖另一个包作为补丁: @babel/runtime
安装: yarn add @babel/runtime ;

配置webpack
image.png

此时转化js时会吧node_module也包含进去, 配置中加入字段排除
image.png

打包查看打包代码
image.png
generator 语法已经被打包进来, 并且类定义也被提取出去了

@babel/polyfill

更高级的语法如es7需要用 @babel/polyfill 转化
安装: yarn add ``@babel/polyfill
写点es7语法:
image.png
查看打包出来的代码, 确实加上了es7的兼容
image.png