webpack 自我提升笔记 -- 5 js语法检查(eslint) & js兼容

功法大纲：

　　js语法检查eslint依赖：eslint、eslint-plugin-import、eslint-config-airbnb-base、eslint-loader

　　jsa兼容（不同浏览器）：babel-loader

 

内功心法第一章：js语法检查

　　webpack.config.js配置

　　...

　　module:{

　　　　rules:[

　　　　　　{

　　　　　　　　test:/\.js$/,

　　　　　　　　exclude:/node_module/,　　//排除node_module中的js文件

　　　　　　　　loader:"eslint-loader",

　　　　　　　　//options:{　　　　　　//先不打开自动修复错误的功能

　　　　　　　　//　　fix:true　　　　　// 自动修复错误

　　　　　　　　//}

　　　　　　}

　　　　]

　　}

　　package.js配置

　　"eslintConfig":{

　　　　extends:"airbnb-base"

　　}

孩儿们操练起来（案例）

 

 

 进入文件目录，执行webpack命令，查看报错

 

 

 终端告诉我们index.js文件中：

　　　　第一行","前需要有一个空格

　　　　第二行没有分号

　　　　第五行打印了东西

所以eslint配置可以帮我们统一开发规范，帮助我们找到哪里不符合规范，当然我们也可以开启自动修复功能，让插件帮我们自动修复

上述webpack.config.js中注释掉的内容打开就行

module:{

　　　　rules:[

　　　　　　{

　　　　　　　　test:/\.js$/,

　　　　　　　　exclude:/node_module/,　　//排除node_module中的js文件

　　　　　　　　loader:"eslint-loader",

　　　　　　　　options:{　　　　　　

　　　　　　　　　　fix:true　　　　　// 自动修复错误

　　　　　　　　}

　　　　　　}

　　　　]

　　}

修改后再次执行webpack,在看下我们的代码

 

 

 已经帮我们自动修复了，而且终端也只剩下console.log的警告了

 

附：

　　只检查自己写的源代码，第三方库不用检查（exclude用于排除非源码）

 

额外历练：

　　// eslint-disable-next-line　　//下一行eslint所有检查规则都失效（下一行不进行eslint检查）

 内功第二章：js兼容

　　js兼容不同的浏览器有三种情况

　　1、基本js兼容的处理 => @babel/preset-env

　　　　问题：只能转换基本语法，如promise等高级语法不能转换

　　2、全部js兼容性处理 => @babel/pofyfill

　　　　问题：原本只想兼容部分，但是插件将所有兼容性代码全部引入，体积太大了

　　3、需要兼容性处理的才做兼容，按需加载 => core-js

最好的方案是 1 、 3配置一起做兼容处理

　　

下山历练：

　　情况1、webpack.config.js配置（需下载插件：@babel/preset-env）

　　　　...

　　　　module:{

　　　　　　rules:[

　　　　　　　　{

　　　　　　　　　　test:/\.js$/,

　　　　　　　　　　exclude:/node_module/,　　　　　　　　//排除文件

　　　　　　　　　　loader:"babel-loader",

　　　　　　　　　　options:{　　　　　　　　　　　　　　　　//预设：指示babel做怎样的兼容处理

　　　　　　　　　　　presets:["@babel/preset-env"]　　

　　　　　　　　　　}

　　　　　　　　}

　　　　　　]

　　　　}

 

　　情况2:下载 @babel/polyfill 插件

　　使用：import "@babel/polyfill";　　(可直接使用)

 

　　情况3: 按需兼容（需下载 core-js）（配合方案1使用）

　　　　...

　　　　module:{

　　　　　　rules:[

　　　　　　　　...

　　　　　　　　{

　　　　　　　　　　test:/\.js$/,

　　　　　　　　　　loader:"babel-loader",

　　　　　　　　　　exclude:/node_module/,　　//排除依赖中的文件

　　　　　　　　　　options:{

　　　　　　　　　　　　presets:[　　　　　　　//预设：指示babel做怎样的兼容处理

　　　　　　　　　　　　　　[

　　　　　　　　　　　　　　　　"@babel/preset-env",

　　　　　　　　　　　　　　　　{

　　　　　　　　　　　　　　　　　　useBuiltsIns:"usage",　　　　//使用内置插件： 按需加载

　　　　　　　　　　　　　　　　　　corejs:{ version:3 },　　　　 // 指定core-js版本

　　　　　　　　　　　　　　　　　　targets:{

　　　　　　　　　　　　　　　　　　　　chrome:"60",　　　　//谷歌60及60以上版本

　　　　　　　　　　　　　　　　　　　　firefox:"60",

　　　　　　　　　　　　　　　　　　　　safari:"10",

　　　　　　　　　　　　　　　　　　　　ie:"9",

　　　　　　　　　　　　　　　　　　　　edge:"17",

　　　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　　　　}

 

　　　　　　　　　　　　　　]

　　　　　　　　　　　　]

　　　　　　　　　　}

　　　　　　　　}

　　　　　　]

　　　　}