webpack入门（六）-- 处理js资源（Eslint、Babel）_marked webpack bable处理-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43516605/article/details/133971560

一、为什么要处理js资源？

首先，webpack自身能处理js的能力十分有限，只能处理js模块化语言，对于其他语法是不能编译的，这样就会导致js不能在IE等浏览器中识别运行。
其次，在现在互联网开发中，团队开发代码的格式规范统一风格是十分重要的，但是如果靠肉眼去检查就太恐怖了。

所以：
针对以上问题，我们想要对js进行额外的处理，处理代码风格，处理js语言的兼容性。

二、如何处理js资源呢？

针对以上两个问题，我们想要对JS做额外的处理：

1、使用Eslint去检测我们的代码风格。
2、使用Bable去转化ES高级语言，处理JS的兼容。

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

三、Eslint处理代码风格

1、Eslint介绍：

可组装的 JavaScript 和 JSX 检查工具。
这句话意思就是：它是用来检测 js 和 jsx 语法的工具，可以配置各项功能。
由于Eslint是被Facebook收购，而Facebook又是React的研发公司，所以自然是直接支持React。
而对于Vue需要额外的工具才能处理。

2、Eslint配置方式

Eslint的配置有两种方式：

１、配置文件方式
配置文件由很多种写法：
.eslintrc.*：新建文件，位于项目根目录（区别在于配置格式不一样）
- .eslintrc
- .eslintrc.js
- .eslintrc.json
2、package.json 中 eslintConfig：不需要创建文件，在原有文件基础上写。

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

3、ESLint 配置文件方式

以ESLint.js文件的配置方式演示（其他方式无非格式不同）：

module.exports = {
    // 解析选项:
    parserOptions: {
        ecmaVersion: 6, // ES 语法版本
        sourceType: "module", // ES 模块化
        ecmaFeatures: { // ES 其他特性
            jsx: true // 如果是 React 项目，就需要开启 jsx 语法
        }
    },
    // 具体检测规则:
    // "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 除了少数情况下不会有警告
        ],
    },
    // 继承其他的规则:
    // 开发中一点点写 rules 规则太费劲了，所以有更好的办法，继承现有的规则。
        // 现有以下较为有名的规则：
        // Eslint 官方的规则：eslint:recommended
        // Vue Cli 官方的规则：plugin:vue/essential
        // React Cli 官方的规则：react-app
    // 例如在React项目中，我们可以这样写配置,就会直接继承React官方的规则，然后再配置rules就会覆盖修改规则了。
    extends: ["react-app"],
    // ...
    // 其他规则详见：https://eslint.bootcss.com/docs/user-guide/configuring
};

下面附上几个官方规则地址：
官方的规则

Vue Cli规则

React Cli规则

4、webpack中Eslint使用实战

1、下载插件依赖

# 需要安装两个依赖，一个是eslint，另一个是eslint插件
npm i eslint-webpack-plugin eslint -D

2、引入插件

在webpack中引入，并配置插件。
插件的使用不像loader，不仅要下载还要引入。
在这里插入图片描述

3、编写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 定义变量
  },
};

4、在js中验证

js中使用var变量，然后编译看是否报错。
在这里插入图片描述
可以明显看见报错信息eslint:

注意：

四、Bable处理语法兼容

1、Bable介绍：

JavaScript 编译器。

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

2、Bable配置方式

Bable的配置有两种方式：

１、配置文件方式
配置文件由很多种写法：
- babel.config.*：新建文件，位于项目根目录
  babel.config.js
  babel.config.json
- .babelrc.*：新建文件，位于项目根目录
  .babelrc
  .babelrc.js
  .babelrc.json
2、package.json 中 babel：不需要创建文件，在原有文件基础上写。

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

3、Babel 配置文件方式

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

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

presets 预设
简单理解：就是一组 Babel 插件, 扩展 Babel 功能
- @babel/preset-env: 一个智能预设，允许您使用最新的 JavaScript。
- @babel/preset-react：一个用来编译 React jsx 语法的预设
- @babel/preset-typescript：一个用来编译 TypeScript 语法的预设

4、webpack中Babel 使用实战

1、下载Babel依赖

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

2、配置Babel loader

webpack.config.js
在这里插入图片描述

3、编写Babel配置文件

这里以babel.config.js为例：

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

4、修改js语法，并编译验证

这里使用es6的箭头函数：
在这里插入图片描述
查看编译后js文件中add函数：

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

五、总结

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