KESHAOYE的后花园

Appearance

处理JS资源 ​

有人可能会问，js 资源 Webpack 不能已经处理了吗，为什么我们还要处理呢？

原因是 Webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器运行，所以我们希望做一些兼容性处理。

其次开发中，团队对代码格式是有严格要求的，我们不能由肉眼去检测代码格式，需要使用专业的工具来检测。

  • 针对 js 兼容性处理，我们使用 Babel 来完成
  • 针对代码格式，我们使用 Eslint 来完成

我们先完成 Eslint，检测代码格式无误后，在由 Babel 做代码兼容性处理

Eslint ​

可组装的 JavaScript 和 JSX 检查工具。

这句话意思就是：它是用来检测 js 和 jsx 语法的工具，可以配置各项功能

我们使用 Eslint，关键是写 Eslint 配置文件，里面写上各种 rules 规则，将来运行 Eslint 时就会以写的规则对代码进行检查

1. 配置文件 ​

配置文件有很多种写法：

  • .eslintrc.*：新建文件，位于项目根目录
    • .eslintrc
    • .eslintrc.js
    • .eslintrc.json
    • 区别在于配置格式不一样
  • package.json 中 eslintConfig：不需要创建文件，在原有文件基础上写

ESLint 会查找和自动读取它们，所以以上配置文件只需要存在一个即可

2. 具体配置 ​

以 eslintrc.js为例

js
module.exports = {
  // 解析选项
  parserOptions: {},
  // 具体检查规则
  rules: {},
  // 继承其他规则
  extends: [],
  // ...
  // 其他规则详见：https://eslint.bootcss.com/docs/user-guide/configuring
};

parseOptions解析选项 ​

js
parseOptions: {
  ecmaVersion: 6, // ES版本
  sourceType: "module", // ES模块化
  ecmaFeatures: { // ES其他特性
    jsx: true // React项目需要开启JSX
  }

}

rules具体规则 ​

  • "off" 或 0 关闭规则
  • "warn" 或 1 开启规则，使用警告级别错误： warn（不导致程序退出）
  • "error" 或 2 开启规则，使用错误级别错误： error （导致程序退出）
js
rules: {
  semi： "error", // 禁止使用分号
  'array-callback-return': 'warn', // 强制数组方法的回调函数中有return语句，否则警告
  'default-case': [
    'warn', // 要求switch语句中有default分支，否则警告
    {commentPattern: '^no defalut$'} // 允许在最后注释 no default，就不会有警告了
  ],
  eqeqeq: [
    'warn', // 强制使用 === 和 !==，否则警告
    'smart' // https://eslint.bootcss.com/docs/rules/eqeqeq#smart 除了少数情况下不会有警告
  ]
}

更多规则详见：规则文档

extends继承 ​

开发中一点点写配置太麻烦了，所以有更好的方法，继承现有的规则

比较有名的规则：

  • Eslint官方规则: eslint:recommended
  • Vue Cli官方规则： plugin:vue/essential
  • React Cli官方规则： react-app
js
// 例如在React项目中，我们可以这样写配置
module.exports = {
  extends: ["react-app"],
  rules: {
    // 我们的规则会覆盖掉react-app的规则
    // 所以想要修改规则直接改就是了
    eqeqeq: ["warn", "smart"],
  },
};

在webpack中使用 ​

  1. 下载包
npm i eslint-webpack-plugin eslint -D
  1. 定义eslint配置文件
  • eslintrc.js
js
module.exports = {
  extends: ['eslint:recommended']，
  parseOptions: {
    ecmaVersion: 6,
    sourceType: 'module',
  },
  env: {
    node: true, // 启用node全局变量
    broswer: true // 启用浏览器全局变量
  },
  rules: [
    'no-var': 2 // error
  ],
}
  1. 修改 js 文件代码
  • main.js
js
import count from "./js/count";
import sum from "./js/sum";
// 引入资源，Webpack才会对其打包
import "./css/iconfont.css";
import "./css/index.css";
import "./less/index.less";
import "./sass/index.sass";
import "./sass/index.scss";
import "./styl/index.styl";

var result1 = count(2, 1);
console.log(result1);
var result2 = sum(1, 2, 3, 4);
console.log(result2);
  1. 配置webpack
  • webpack.config.js
js
const path = require('path')
const ESLintWebpackPlugin = require('eslint-webpack-plugin')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '/static/js/main.js'
  },
  rules:[{
    test: /\.css$/,
    use: ['style-loader','css-loader']
  },{
    test: /\.less$/,
    use: ['style-loader','css-loader','less-loader']
  },{
    test: /\.s[ac]ss$/,
    use: ['style-loader','css-loader','sass-loader']
  },{
    test: /\.styl$/,
    use: ['style-loader','css-loader','stylus-loader']
  },{
    test: /\.(png|svg|webp|jpe?g|gif)$/,
    type: 'asset',
    parse: {
      dataUrlCondition: {
        maxSize: 10 * 1024
      }
    },
    generator: {
      filename: '/static/images/[hash:10][ext][query]'
    }
  },{
    test: /\.(ttf|woff2?|avi|mp3|mp4)$/,
    type: 'asset/resource',
    generator: {
      filename: '/static/media/[hash:10][ext][query]'
    }
  }],
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, 'src')
    })
  ],
  mode: 'development'
}
  1. 运行指令

npx webpack

VSCode Eslint插件 ​

打开 VSCode，下载 Eslint 插件，即可不用编译就能看到错误，可以提前解决

但是此时就会对项目所有文件默认进行 Eslint 检查了，我们 dist 目录下的打包后文件就会报错。但是我们只需要检查 src 下面的文件，不需要检查 dist 下面的文件。

所以可以使用 Eslint 忽略文件解决。在项目根目录新建下面文件:

  • .eslintignore
# 忽略dist目录下所有文件

dist

Babel ​

JavaScript 编译器。

主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中

1. 配置文件 ​

配置文件由很多种写法：

  • babel.config.*：新建文件，位于项目根目录
    • babel.config.js
    • babel.config.json
  • .babelrc.*：新建文件，位于项目根目录
    • .babelrc
    • .babelrc.js
    • .babelrc.json
  • package.json 中 babel：不需要创建文件，在原有文件基础上写

Babel 会查找和自动读取它们，所以以上配置文件只需要存在一个即可

2. 具体配置 ​

以bable.config.js为例

js
module.exports = {
  // 预设
  presets: [],
};
  1. presets预设

简单理解就是一组babel插件，扩展babel功能

  • @babel/preset-env: 一个智能预设，允许您使用最新的 JavaScript。
  • @babel/preset-react：一个用来编译 React jsx 语法的预设
  • @babel/preset-typescript：一个用来编译 TypeScript 语法的预设

3. 在webpack中使用 ​

  1. 下载包

npm i bable-loader @babel/core @babel/preset-env -D\

  1. 定义Babel配置文件
  • babel.config.js
js
module.exports = {
  presets: ['@babel/preset-env']
}
  1. 修改js文件代码
  • main.js
js
import count from "./js/count";
import sum from "./js/sum";
// 引入资源，Webpack才会对其打包
import "./css/iconfont.css";
import "./css/index.css";
import "./less/index.less";
import "./sass/index.sass";
import "./sass/index.scss";
import "./styl/index.styl";

const result1 = count(2, 1);
console.log(result1);
const result2 = sum(1, 2, 3, 4);
console.log(result2);
  1. 配置
  • webpack.config.js
js
const path = require('path')
const ESLintWebpackPlugin = require('eslint-webpack-plugin')

module.exports = {
  entry: '',
  output: {},
  module: {
    rules: [ {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
      {
        test: /\.js$/,
        exclude: 'node_module', // 排除node——module不编译
        loader: 'babel-loader'
      }
      ]
  },
  plugins: [
    new ESLintWebpackPlugin({
      context: path.resolve(__dirname, 'src')
    })
  ],
  mode: 'development'
}
  1. 运行指令

npx webpack

打开打包后的 dist/static/js/main.js 文件查看，会发现箭头函数等 ES6 语法已经转换了

KESHAOYE-知识星球

Copyright © 2023-2024 KEWEI LI（2024.1.22起改版中...）