《Webpack5 核心原理与应用实践》学习笔记 -> 搭建`babel`、`TS`、`eslint`环境

前两篇是免费的，就不写了，直接从环境搭建开始写。
然后自己梳理了一下，感觉他的结构是乱的。

1. 搭建 `webpack` 开发环境

初始化练手项目工程。
- 新建文件夹，取个名字，我的就叫webpack-learn
- 在这个文件夹的地址栏中敲cmd，唤出cmd窗口
- 输入命令npm int -y（需要安装node，虽然我说这个有点废话）
初始化webpack
- 上面的完成之后可以使用自己喜欢的编辑器打开项目了，也可以不用。
- 继续命令行安装webpack
- npm i -D webpack webpack-cli

创建webpack配置文件

在根目录下面创建webpack.config.js文件，内容如下

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    }
}

创建src目录，下面再创建一个index.js文件，里面随便写点什么，我的就下面这些。

  const list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  list.map(item => item)

测试环境是否正常
- 命令行输入npx webpack
- 没有报错，并且在根目录下面生成了dist目录，里面有一个main.js文件就说明你成功了。
为什么是main.js？
因为单入口默认的key就是main，可以修改一下入口配置就ok了，将入口由字符串改成对象。

2. 搭建`babel`

babel是啥？
babel就是让你写的js能兼容很多浏览器，例如你用了最新的es6的语法，旧版的浏览器还没有更新这个语法，不支持，babel就会帮你转换。
babel怎么做到兼容的？
把高版本的语法换成低版本的语法，例如低版本不支持数组扁平化的方法[].flat()，babel就帮你在Array的原型上给你加一个flat的方法让你支持，不支持Promise，就在全局加一个Promise。

安装babel

命令行输入：npm i -D @babel/core @babel/preset-env babel-loader
webpack.config.js中添加模块处理规则

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /.js$/,  // 只有js文件才会走这个规则
                use: {
                    loader: 'babel-loader', // 使用什么loader来处理这个文件
                    options: { // 可以有一些额外的配置，具体可以去了解一下babel
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
}

创建.babelrc文件，内容如下

{
  "presets": [
    "es2015"
  ]
}

这里因为使用bable额外的东西，他上面没讲，需要需要安装额外的依赖
控制台输入：npm i -D babel-preset-es2015

其实可以不用管.babelrc里面的内容，就是忽略第三步包括第三步之后的内容，这样生成的文件内容也不一样。
这里作为拓展学习部分，因为可能添加了之后可能会报错，因为还有一些环境的配置，只是个人在学习的过程中，看着里面没写东西就加了内容。

完了之后命令行：npx webpack
可以重新看一下dist下面生成的内容了。

3. 搭建`TS`

TS是啥？
TS全称TypeScript，是JavaScript的超集，TypeScript扩展了JavaScript的语法，所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作。
那它解决了什么问题？
TypeScript的设计目的应该是解决JavaScript的痛点：弱类型和没有命名空间，导致很难模块化，不适合开发大型程序。另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程。

安装TS

命令行输入：npm i -D typescript ts-loader
webpack.config.js添加处理规则

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-typescript']
                    }
                }
            },
            {
                test: /.ts$/,
                use: {
                    loader: 'ts-loader'
                }
            }
        ]
    },
    resolve: { // 声明自动解析 `.ts` 后缀文件，这意味着代码如 `import "./a.ts"` 可以忽略后缀声明，简化为 `import "./a"` 文件
        extensions: ['.ts', '.js'],
    }
}

上面是我跟着课程写，到TS的配置的完整配置，不是课程中的配置，掺杂了个人想学习的想法，因为配置可以简化。

简化配置
安装@babel/preset-typescript: npm i -D @babel/preset-typescript

下面的是课程中的代码，注释是错的，不修正表示对课程的尊重，因为有可能是我错了。
简化配置@babel/preset-typescript 只是简单完成代码转换，并未做类似 ts-loader 的类型检查工作，大家需要根据实际场景选择适当工具。

// 预先安装 @babel/preset-env
// npm i -D @babel/preset-env
module.exports = {
    /* ... */
    module: {
        rules: [{
            test: /.js$/,
            use: [
                {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-typescript'],
                    },
                },
            ],
        },
       ],
    },
};

创建 tsconfig.json 配置文件，并补充 TypeScript 配置信息

// tsconfig.json
{
  "compilerOptions": {
    "noImplicitAny": true,
    "moduleResolution": "node"
  }
}

课程中少讲了一步，创建TS文件，这里补充，可以直接将index.js的后缀名改为ts

执行编译命令：npx webpack

搭建`ESLint`

ESLint是什么？
ESLint是代码风格检测工具，让团队写出风格一致的代码，还能提前检测出代码中的语法、类型，或其它可能影响稳定性的错误。

安装ESLint

命令行输入：npm i -D eslint eslint-webpack-plugin
使用已经配置好的检测风格：npm i -D eslint-config-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node
在项目根目录添加 .eslintrc 配置文件

// .babelrc
{
  "extends": "standard"
}

添加 webpack.config.js 配置文件，补充 eslint-webpack-plugin 配置

const path = require('path');
const EslintPlugin = require('eslint-webpack-plugin'); // 引入 eslint-webpack-plugin 插件

module.exports = {
    mode: 'development',
    entry: { // 多入口
        index: './src/index.js',
        test: './src/test.ts'
    },
    output: {
        filename: '[name]-[hash].js', // 加 hash 值做文件名称
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-typescript']
                    }
                }
            },
            {
                test: /.ts$/,
                use: {
                    loader: 'ts-loader'
                }
            }
        ]
    },
    resolve: {
        extensions: ['.ts', '.js'],
    },
    plugins: [
        // 注册 eslint 插件
        new EslintPlugin({
            extensions: ['.ts', '.js']
        })
    ]
}

上面的配置是个人练习中的完整配置，内容和课程相同，不过会掺杂个人的想法，会和课程相比超纲，可以当做扩展练习。

总结

下面是课程中的总结，不是个人总结，个人总结就是配置好了可以用。

本文介绍了 ESLint、TypeScript、Babel 三类工程化工具的历史背景、功能，以及在 Webpack 中接入这些工具的具体步骤。这三种工具各自补齐了 JavaScript 语言某些薄弱环节：

Babel 提供的语言转译能力，能在确保产物兼容性的同时，让我们大胆使用各种新的 ECMAScript 语言特性；
TypeScript 提供的类型检查能力，能有效提升应用代码的健壮性；
ESLint 提供的风格检查能力，能确保多人协作时的代码一致性。

它们已成为构建现代 JavaScript 应用的基础设施，建议读者遵循文章提及的学习建议，扩展学习各个工具的功能细节。

我的笔记会记录我的理解和我不是很清晰的点，课程中的重点还是在课程里面，系统的学习还是建议买课，最后附上推广链接 ---> 使劲戳《Webpack5 核心原理与应用实践》

掘金课程《Webpack5 核心原理与应用实践》学习笔记

《Webpack5 核心原理与应用实践》学习笔记 -> 搭建babel、TS、eslint环境

1. 搭建 webpack 开发环境

2. 搭建babel

3. 搭建TS

搭建ESLint

总结

《Webpack5 核心原理与应用实践》学习笔记 -> 搭建`babel`、`TS`、`eslint`环境

1. 搭建 `webpack` 开发环境

2. 搭建`babel`

3. 搭建`TS`

搭建`ESLint`