004 webpack基础 - webpack处理JS资源

[A] 简介

　　1. webpack自身可以处理js资源，但是仅限于处理 js 中简单的 ES Module 语法

　　2. webpack自身不能进行代码检测，ts->js的转换，箭头函数不能编译(IE不能识别任何的ES6语法)

　　3. 因此，对于JS代码的处理，主要分为两部分：代码编译 和 格式检测

　　　　代码编译：

　　　　　　即做兼容性处理，ES6 -> ES5等，用babel来完成

　　　　代码检测：

　　　　　　即检查代码格式是否有误，用Eslint来完成

　　4. eslint的处理顺序是 先用eslint检查格式，再用babel进行语法转换

 

[B] eslint的使用

　　1. 用来检测 js 和 jsx 语法的工具，可以配置各项功能

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

        3. 配置文件有很多种写法，我们可以书写好配置文件，置于根目录下

            配置文件可以命名为:

                1. .eslintrc.* 的格式

                    如：

                        .eslintrc

                        .eslintrc.js

                        .eslintrc.json

                        // 区别在于配置格式不一样

                2. package.json 中 eslintConfig：不需要创建文件，在原有文件基础上写

        4. 这里，我们选用.eslintrc.js命名，因为可以直接书写js语法

            // .eslintrc.js

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

            parserOptions 解析选项：

                1. 解析选项，是告诉eslint工具，当前的js语法信息

                2. 配置示例：

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

            rules具体规则：

                1. 检查规则，一般都直接设置，检查结果为警告，错误，还是不检查

                    "off" 或 0 - 关闭规则

                    "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)

                    "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

                2. 示例：

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

                3. 更多检查配置，可查官网

　　　　extends 继承：

                1. 事实上，开发者一条条去配置规则，相当耗时耗力，因此，我们可以通过继承一些现有的规则

                2. 比较有名的规则右：

                    Eslint官方的规则：eslint:recommended

                    Vue cli的官方规则：plugin:vue/essential

                    React cli官方的规则：react-app

                3. 若继承来的某些规则我们需要求该，可直接在rules中添加即可，rules中的规则会覆盖掉继承来的规则

                4. 示例：

　　　　　　module.exports = {
　　　　　　　　extends: ["react-app"],
　　　　　　　　rules: {
　　　　　　　　　　// 我们的规则会覆盖掉react-app的规则
　　　　　　　　　　// 所以想要修改规则直接改就是了
　　　　　　　　　　eqeqeq: ["warn", "smart"],
　　　　　　　　},
　　　　　　}

　　5. eslint的使用：

　　　　1. 在 webpack4 中，eslint 是一个 loader，但在 webpack5 中是一个plugin

　　　　2. 书写配置文件

　　　　3. 在webpack插件中配置

　　　　plugins: [
　　　　　　// 插件配置
　　　　　　// eslint插件
　　　　　　new ESLintPlugin({
　　　　　　　　context: path.resolve(__dirname, 'src')
　　　　　 })
　　　　],

            4. 这样配置，会导致eslint会检查所有位置的js文件，而dist文件夹中的js文件，我们不需要检查的，因此，可以在根目录下，增加一个.eslintignore文件，配置需要忽略的js文件目录

                // .eslintignore

                dist

                ...

            5. 由于eslint使用相当普遍，因此，我们可以直接在vscode左侧栏的拓展中直接下载，就省去了上述安装配置的操作了

 

[C] babel的使用

        1. babel主要是讲ES6编写的语法转换成ES5的语法，实现向后兼容的JavaScript，以便可以运行在旧版本的浏览器或其他环境中

        2. 其使用很简单，官网查询，安装babel-loader，然后在wabpack中配置即可

            安装

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

            webpack配置：

　　　　module: {
　　　　　　rules: [
　　　　　　　　{
　　　　　　　　　　test: /\.js$/,
                 exclude: /node_modules/,
                 use: {
                 　　loader: 'babel-loader',
                 　　options: {
                 　　　　presets: ['@babel/preset-env']
                　　 }
            　　  }
        　　  }
          ]
      }

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

                @babel/preset-env: 一个智能预设，允许您使用最新的 JavaScript。

                @babel/preset-react：一个用来编译 React jsx 语法的预设

                @babel/preset-typescript：一个用来编译 TypeScript 语法的预设

        3. 此外，options中的内容，可以单独抽取出来，卸载配置文件中，便于修改

            配置文件的书写方法：

                babel.config.*: 新建文件，位于根目录下

                    如：

        babel.config.js
        babel.config.json

                .babelrc.*: 新建文件，位于根目录下

                    如：

            .babelrc
            .babelrc.js
            .babelrc.json    

                package.json中的babel: 不需要创建文件，在原有文件中书写

                // 配置其一即可

            示例：

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