webpack 处理js资源

Eslint

可组装的Javascript和JSX检查工具，可以配置rule规则

配置文件

根目录下 - .eslintrc.js 文件

基本配置

module.exports = {
  // 解析选项
  parserOptions: {},
  // 具体检查规则
  rules: {},
  // 继承其他规则
  extends: [],
};

eslint.bootcss.com/docs/user-g…

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 除了少数情况下不会有警告
  ],
}

更多规则详见：规则文档

规则继承

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

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

使用：

• 安装npm i eslint-webpack-plugin eslint -D
• 插件使用
  • 导入:const ESLintWebpackPlugin = require("eslint-webpack-plugin")
  • 使用：

plugins: [
    new ESLintWebpackPlugin({
        // 指定检查文件的根目录
        context: path.resolve(__dirname, "src"),
    }),
],

• .eslintrc.js文件配置

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

• 忽略检查文件（.eslintignore）
  • 这个文件下的文件eslint不会进行配置检查

babel

作用：将ES6语法编译成向后兼容的Javascript语法

配置文件：babel.config.js

具体配置：

• 安装：npm i babel-loader @babel/core @babel/preset-env
• 配置文件vue.config.js：

{
     test: /\.js$/,
     exclude: /node_modules/, // 排除node_modules代码不编译
     loader: "babel-loader",
   }

• 配置babel.config.js

export default = {
   presets: ["@babel/preset-env"] 
}

presets预设：

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