06_js文件处理

webpack对JS的编译处理有限,如果遇到ES6语法,可能导致不能编译成其他语法,导致低版本浏览器无法运行,所以也要做一些兼容性处理

其次,在开发过程中,代码可能存在缩进换行等不规范问题,导致代码编译过程中报错。而这些问题,又是一些非常细节的问题,通过肉眼往往无法判断。所以,需要借助工具来实现。

针对代码兼容性问题,通过Babel处理
针对格式问题,使用Eslint处理
需要先进行代码格式的检查,再进行代码兼容性编译。

Eslint


可组装的JavaScript 和 JSX检查工具
意思是,可以用来检测js 和jsx语法的工具
使用方式也是通过配置各项rules,实现对代码的检查

首先,需要安装 eslint-webpack-plugin:

[precode]npm install eslint-webpack-plugin --save-dev[/precode]

注意: 如果未安装 eslint >= 7 ,你还需先通过 npm 安装:

[precode]npm install eslint --save-dev[/precode]

然后把插件添加到你的 webpack 配置。例如:

[precode]

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
// ...
plugins: [new ESLintPlugin(options)],
// ...
};

[/precode]


具体配置:.eslintrc.js

参考中文文档:https://eslint.bootcss.com/docs/user-guide/configuring

通过配置文件 .eslintignore 忽略文件

[precode]dist
/root/src/*.js[/precode]

Babel

Babel 是一个 JavaScript 编译器

Babel 是一个工具链,主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。

安装

[precode]npm install -D babel-loader @babel/core @babel/preset-env [/precode]

配置

[precode]module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}[/precode]

梓旭梓旭
THE END
分享
二维码
< <上一篇
下一篇>>