webpack进化、babel及eslint

2019-12-09 本文已影响0人 GGatsby

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",