处理 js 资源

在 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配置文件为例：

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

parserOptions 解析选项

parserOptions:{
  ecmaVersion:6,//es语法版本
  sourceType:'module',//ES模块化
  ecmaFeatures:{ //ES其他特性
    jsx:true//如果是react项目，就需要开启jsx语法
  }
}

rules 具体规则

"OFF" 或 0 - 关闭规则
"warn" 或 1 - 开启规则，使用告警级别的错误：warn（不会导致程序退出）。
"error" 或 2 - 开启规则，使用错误级别的错误：error（当被处罚的时候，程序会退出）。

rules: {
  semi: "error", // 禁止使用分号
  'array-callback-return': 'warn', // 强制数组方法的回调函数中有 return 语句，否则警告
  'default-case': [
    'warn', // 要求 switch 语句中有 default 分支，否则警告
    { commentPattern: '^no default$' } // 允许在最后注释 no default, 就不会有警告了
  ],
  eqeqeq: [
    'warn', // 强制使用 === 和 !==，否则警告
    'smart' // https://eslint.bootcss.com/docs/rules/eqeqeq#smart 除了少数情况下不会有警告
  ],
}

更多规则详见：规则文档

extends 继承开发中一点点写 rules 规则太费劲了，所以我们可以通过继承现有的规则来处理。

现有比较出名的规则

Eslint 官方的规则：eslint:recommended
Vue Cli 官方的规则：plugin:vue/essential
React Cli 官方的规则: react-app

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

3.在 webpack 中使用

下载包

npm i eslint-webpack-plugin eslint -D

定义 Eslint 配置文件

.eslintrc.js

module.exports = {
  // 继承 Eslint 规则
  extends: ["eslint:recommended"],
  env: {
    node: true, // 启用node中全局变量
    browser: true, // 启用浏览器中全局变量
  },
  parserOptions: {
    ecmaVersion: 6,
    sourceType: "module",
  },
  rules: {
    "no-var": 2, // 不能使用 var 定义变量
  },
};

修改 js 文件代码

main.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);

配置

webpack.config.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", // 将 js 文件输出到 static/js 目录中
    clean: true, // 自动将上次打包目录资源清空
  },
  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]",
        },
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "src"),
    }),
  ],
  mode: "development",
};

运行指令

npx webpack

4.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.具体配置

我们以babel.config.js配置文件为例

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

presets 预设简单理解：就是一组 Babel 插件，扩展 Babel 功能。

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

3.在 Webpack 中使用

下载包

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

定义 Babel 配置文件

babel.config.js

module.exports = {
  presets: ["@babel/preset-env"],
};

修改 js 文件代码

main.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);

配置

webpack.config.js

const path = require("path");
const ESlintWebpackPlugin = require("eslint-webpack-plugin");

module.exports = {
  //入口
  entry: "./src/main.js", //相对路径
  //输出
  output: {
    //文件的输出路径
    //__dirname nodejs的变量，代表当前文件的文件夹目录
    path: path.resolve(__dirname, "dist"), //相对路径
    //文件名
    filename: "static/js/main.js",
    //自动清空上次打包的内容
    //原理：在打包前，将path整个目录内容清空，在进行打包。
    clean: true,
  },
  //加载器
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        //loader 只能使用一个 loader
        use: [
          // compiles Less to CSS
          "style-loader",
          "css-loader",
          "less-loader",
        ],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          // 将 JS 字符串生成为 style 节点
          "style-loader",
          // 将 CSS 转化成 CommonJS 模块
          "css-loader",
          // 将 Sass 编译成 CSS
          "sass-loader",
        ],
      },
      {
        test: /\.styl$/,
        use: [
          "style-loader",
          "css-loader",
          "stylus-loader", // 将stylus编译成css文件
        ],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          //小于10kb的图片转base64
          //优点：减少请求数量 缺点：体积会更大
          dataUrlCondition: {
            maxSize: 10 * 1024, // 10kb
          },
        },
        generator: {
          //输出图片名称
          //[hash:10] hash 取前10位
          filename: "static/images/[hash:10][ext][query]",
        },
      },
      {
        test: /\.(ttf|woff2?|map3|ma4|avi)$/,
        type: "asset/resource",
        generator: {
          //输出名称
          filename: "static/media/[hash:10][ext][query]",
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, //排除node_modules代码不编译
        loader: "babel-loader",
      },
    ],
  },

  //插件
  plugins: [
    //plugin的配置
    new ESlintWebpackPlugin({
      context: path.resolve(__dirname, "src"),
    }),
  ],
  //模式
  mode: "development",
};

运行指令

npx webpack

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