js文件的处理
1. eslint格式化js文件
-
创建eslint配置文件(三种方法都可以)
- .eslintrc
- .eslintrc.js(推荐,注释方便,符合js习惯)
- .eslintrc.json
-
基础的配置文件
-
module.exports = { // 解析器选项 parserOptions: { ecmaVersion: 6, //支持的es语法版本 sourceType: 'module', // es模块化 ecmaFeatures: { // 支持的其他特性 jsx: true, // 如果是react项目打开这个 } }, // eslint.bootcss.com/docs/rules/ rules: { // key: value /** * key: 规则名 * value: 规则的控制 * off/0 关闭该规则 * warn/1 警告级别 * error/2 错误级别 */ 'no-var': 2, 'no-unused-vars': 0 }, // 继承规则,比如: eslint 官方推荐规则 extends: ['eslint:recommended'], env: { node: true, // node的全局内置api变量可用 browser: true // bom模型的内置api变量可用 es6: true // es6 新特性,比如:promise } }
-
-
安装和使用插件(之前的版本使用 loader 处理)
-
npm install eslint-webpack-plugin eslint --save-dev
-
const ESLintPlugin = require('eslint-webpack-plugin'); module.exports = { // ... plugins: [new ESLintPlugin({ context: path.join(__dirname, 'src') // 配置eslint检测范围 })], // ... };
-
创建
.eslintignore
文件-
vscode 的 eslint 插件也会扫描eslint配置文件,但它无法读取我们在webpack.config.js中设置的扫描范围,所以我们需要创建
.eslintignore
文件 -
// .eslintignore 文件 dist
-
2. babel 处理js兼容性
-
创建babel 配置文件
-
.babelrc
-
.babelrc.js( 推荐 )
-
.babelrc.json
-
module.exports = { // 预设 // @babel/preset-env: 一个智能预设,允许使用最新的javascript语法(比如箭头函数, ...) presets: ['@babel/preset-env'], }
-
-
安装依赖
-
npm install -D babel-loader @babel/core @babel/preset-env
-
使用
-
{ test: /\.js$/, exclude: /(node_modules)/, // 设置哪些目录不需要扫描 use: [{ loader: 'babel-loader?cacheDirectory', //开启缓存,可以设置缓存目录 }, ...] },
-
babel存在的一些问题:
-
Babel 在每个文件都插入了辅助代码,使代码体积过大!
-
解决方案:
-
安装依赖
-
// 下面安装的两个依赖避免babel重复注入辅助代码,改用引用 runtime的形式 npm install -D @babel/plugin-transform-runtime npm install @babel/runtime
-
修改配置文件,添加如下代码
-
module.exports = { // 禁用 Babel 自动对每个文件的 runtime 注入,改为引入 @babel/plugin-transform-runtime 并且使所有辅助代码从这里引用。 plugins: ['@babel/plugin-transform-runtime'] }
-
-
babel-loader 很慢!
- 开启缓存:
'babel-loader?cacheDirectory'
- 排除不需要检测的目录:
exclude: /(node_modules)/, // 设置哪些目录不需要扫描
- 开启缓存:
-
3. 使用 core-js 解决 babel 无法解决的兼容性问题
-
babel 的 preset-env 可以解决一些 es6 语法的兼容性问题(箭头函数、…语法等),但比如 async、promise、Array.includes()等preset-env是处理不了的,所以我们要用到 core-js来处理 es6以及 es6+的 polyfill
-
安装依赖
-
npm install core-js
-
使用方式 1: 完全引入
-
import 'core-js'
-
自动按需引入,修改 babel 的 preset-env 设置( 不需要再按照方式1 引入 core-js了 )
-
module.exports = { // 预设 // @babel/preset-env: 一个智能预设,允许使用最新的javascript语法(比如箭头函数, ...) presets: [ // 预设的配置是需要使用数组实现的,配置对象作为数组的第二个元素出现 ['@babel/preset-env', { useBuiltIns: 'usage', // core-js 按需引入 corejs: 3 // core-js 版本 }] ], }