[JavaScript知识库]webpack4配置js语法检查、兼容、压缩，airbnb、eslint-config-airbnb-base eslint eslint-plugin-import

接上一篇文章》》》》》》》》

js语法检查 ：eslint-loader eslint

一般只检查自己写的开发代码，不检查第三方库的代码。需要在package.json中配置esLintConfig中设置

js风格指南库：airbnb。为了使用这个风格指南，得使用开发依赖eslint-config-airbnb-base eslint eslint-plugin-import。使用的webpackLoader：eslint-loader。npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D

• 首先在webpack配置的module的rules中配置

{
                test: /\.js$/,
                loader:"eslint-loader",//js检查语法
                exclude: /nmode_modules/ ,//这里就是排除不需要语法检查的文件夹
                enforce: 'pre',//优先执行
                options: {
                    //自动修复语法错误
                    fix: true
                }
            }

• 然后在package.json增加一项：

"eslintConfig": {
    "extends": "airbnb-base"
  }

提示–>在js的文件中如果不想让webpack打包的时候检测某行代码，在这一行代码的上面可以添加这样一行注释：

// eslint-disable-next-line 表示不检测下一行代码

注意： 当同一种文件被不同的loader处理时，需要指定优先顺序enforce: ‘pre’,

js兼容性处理

使用webpack做js兼容性处理需要用到–>babel-loader @babel/preset-env @babel/core @babel/ployfill core-js

• @babel/preset-env：使用方法是在webpack.config中配置：只能转换基本的语法，比如const–>var等基本语法，高级语法比如promise不转换。
• @babel/ployfill: 使用方法是在js文件中引入import '@babel/ployfill' 此时会将所有的兼容文件都引入，打包文件大小会显得相当庞大
• core-js：兼容性按需加载，使用方法是在webpack.config中配置，当使用core-js的时候不能同时使用@babel/ployfill，打包时可能会报错'core-js' should be listed in the project's dependencies, not devDependencies ，将core-js安装到项目依赖即可

{
                test: /\.js$/,
                loader:"babel-loader",//js检查语法兼容
                exclude: /nmode_modules/ ,
                options: {
                    presets:[
                        [
                            "@babel/preset-env",
                            {
                                //按需加载的配置 
                                useBuiltIns: 'usage',
                                //制定core-js的版本
                                corejs:{
                                    version: 3
                                },
                                //指定兼容哪个版本的浏览器
                                targets:{
                                    chrome: '60',
                                    firefox: '60',
                                    ie:'9',
                                    safari: '10',
                                    edge:'17'
                                }
                            }
                        ]
                    ]
                }
            }

在js中写入es代码

const xkl = () => {
  console.log('基本兼容');
};
xkl();
const prosime = new Promise((resolve) => {
  setTimeout(() => {
    console.log('定时一秒的Promise');
    resolve();
  }, 1000);
});

console.log(prosime);

使用兼容后在ie和其他浏览器中都可以正常运行，若不做兼容处理，在ie11中会报prosime语法错误

js压缩是在生产环境下自动压缩