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']	
	}
}
  1. 全部兼容性处理
  • 安装插件:@babel/polyfill
    npm install @babel/polyfill -D
  • 在需要处理的js中加载该插件:@babel/polyfill
    import '@babel/polyfill';
  1. 需要做兼容性处理的就按需加载 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不能同时使用

你可能感兴趣的:(05js语法检查、js兼容性处理)