05js语法检查、js兼容性处理

js语法检查

js语法检查插件：eslint-loader eslint
js语法规则插件：eslint-config-airbnb-base eslint-plugin-import

1. 安装eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import
   npm install eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D
2. 在webpack.config.js中引用配置rules规则

{
    /**
     * 语法检查：eslint-loader eslint
     *     注意：只检查自己写的源代码，第三方的库是不用检查的
     *     设置检查规则：
     *      package.json中eslintConfig中设置~
     *      "eslintConfig": {
                "extends": "airbnb-base"
            }
     *      airbnb --> eslint-config-airbnb-base eslint-plugin-import eslint
     */
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'eslint-loader',
    options: {
        // 自动修复eslint的错误
        fix: true
    }
}

3.在package.json中配置引用的规则插件：airbnb-base

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

js兼容性处理

• js简单兼容性处理插件：babel-loader @babel/core @babel/preset-env
• 全部兼容性处理：@babel/polyfill
• 需要做兼容性处理的就按需加载：core-js

1. js简单兼容性处理

• 安装插件：babel-loader @babel/core @babel/preset-env
  npm install babel-loader @babel/core @babel/preset-env -D
• 在webpack.config.js中的rules配置如下：

{
	test: /\.js$/,
	exclude: /node_modules/,
	loader: 'babel-loader',
	options: {
	    //1. 指示babel做怎么样的兼容性处理
	    presets: ['@babel/preset-env']	
	}
}

2. 全部兼容性处理

• 安装插件：@babel/polyfill
  npm install @babel/polyfill -D
• 在需要处理的js中加载该插件：@babel/polyfill
  import '@babel/polyfill';

3. 需要做兼容性处理的就按需加载 core-js

• 安装插件：core-js
  npm install core-jsl -D
• 在webpack.config.js的rules中配置相应的参数：

{
	test: /\.js$/,
	exclude: /node_modules/,
	loader: 'babel-loader',
	options: {
	    //1. 指示babel做怎么样的兼容性处理
	    //presets: ['@babel/preset-env']
	
	    //2. 预设：指示babel做怎么样的兼容性处理
	    presets: [
	        [
	            '@babel/preset-env',
	            {
	                // 按需加载
	                useBuiltIns: 'usage',
	                // 指定core-js版本
	                corejs: {
	                    version: 3
	                },
	                // 指定兼容性做到哪个版本浏览器
	                targets: {
	                    chrome: '70',
	                    firefox: '63',
	                    ie: '9',
	                    safari: '12',
	                    edge: '19'
	                }
	            }
	        ]
	    ]
	}
}

注意：第2和第3不能同时使用