webpack进化
https://www.cnblogs.com/wmhuang/p/8967639.html
@babel/plugin-transform-runtime
development环境使用,依赖@babel/runtime,后者production环境使用,用于复用一些runtime里定义的方法来减少打包体积,在使用es6内置的一些方法如Set,Promise,Map,Symbol,generator等时,自动引入babel解析方法,但是对于一些定义在全局prototype上的方法,如Array.prototype.includes()方法,需要引入babel-polyfill,babel-polyfill打包后体积比较大,100多k,因此不建议使用,具体解析:https://www.jianshu.com/p/7bc7b0fadfc2
关于babel-polyfill与babel-runtime
https://www.jianshu.com/p/73ba084795ce
babel-preset-stage-x
在babel v7版本以上,stage-x均已被废弃,用preset-env代替
babel/preset-env
- 将ES5+转化为ES5,并减少打包体积
- 保有运行环境和插件对应关系的map,根据用户配置生成插件列表并推给babel
It is important to note that @babel/preset-env does not support stage-x plugins.
@babel/preset-env
takes any target environments you've specified and checks them against its mappings to compile a list of plugins and passes it to Babel.
https://babeljs.io/docs/en/babel-preset-env
- 关于配置参数useBuiltIns:根据浏览器兼容引入对应的polyfillhttps://www.cnblogs.com/amiezhang/p/11384309.html
在react项目中引入eslint
- 依赖包:
eslint主体包,eslint-loader编译时使用,eslint-plugin-react,babel-eslint使eslint支持es6语法
- webpack配置
{
test: /\.js$/,
include: [path.resolve(__dirname, 'src')],
use: {
loader: 'eslint-loader'
}
}
- eslintrc.json
"parser": "babel-eslint",