第十一章：现代 JavaScript 工具链

由代码编写到代码部署，合理地使用工具可以大幅提升开发效率和代码质量。本章我们将深入探讨几种重要的 JavaScript 工具，包括模块打包工具、代码质量工具和构建与部署工具，并通过实际操作示例，帮助你熟悉并掌握这些工具的使用。

模块打包工具

模块化开发有助于代码的维护和复用，而模块打包工具则是将这些模块组织并打包成最终可运行代码的关键。下面我们将介绍两种常见的模块打包工具：Webpack 和 Rollup。

什么是模块打包工具？

模块打包工具是用来处理模块化代码，将多个模块合并成一个或多个文件的工具。它们可以解析项目中的依赖关系，处理不同类型的资源（如 JavaScript、CSS、图片等），并生成适合在浏览器或其他环境中运行的最终代码。

使用 Webpack 进行模块打包

Webpack 是目前最流行的模块打包工具之一，功能强大且灵活。以下是使用 Webpack 打包 JavaScript 项目的基本步骤：

1. 安装 Webpack 首先，我们需要安装 Webpack 及其 CLI 工具：

npm install --save-dev webpack webpack-cli

2. 配置 Webpack 在项目根目录下创建一个 webpack.config.js 文件，进行基本配置：

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
};

在此配置中，我们指定了入口文件 src/index.js 和输出文件 dist/bundle.js，并使用 Babel 进行代码转换。

3. 运行 Webpack 配置完成后，可以通过以下命令运行 Webpack 来打包代码：

npx webpack --config webpack.config.js

使用 Rollup 进行模块打包

Rollup 是另一个流行的模块打包工具，特别适用于库和模块的打包。以下是使用 Rollup 打包 JavaScript 项目的基本步骤：

1. 安装 Rollup 首先，安装 Rollup 及其 Babel 插件：

npm install --save-dev rollup @rollup/plugin-babel @rollup/plugin-node-resolve @rollup/plugin-commonjs

2. 配置 Rollup 在项目根目录下创建一个 rollup.config.js 文件，进行基本配置：

import babel from "@rollup/plugin-babel";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";

export default {
  input: "src/index.js",
  output: {
    file: "dist/bundle.js",
    format: "cjs",
  },
  plugins: [resolve(), commonjs(), babel({ babelHelpers: "bundled" })],
};

3. 运行 Rollup 配置完成后，可以通过以下命令运行 Rollup 来打包代码：

npx rollup -c

代码质量工具

代码质量工具可以帮助我们保持代码的一致性、避免常见错误，并提高整体代码质量。下面我们将介绍两种常见的代码质量工具：ESLint 和 Prettier。

使用 ESLint 进行代码规范检查

ESLint 是一个用于检测 JavaScript 代码中的问题并确保代码遵循特定编码规范的工具。以下是使用 ESLint 进行代码检查的基本步骤：

1. 安装 ESLint 首先，安装 ESLint 及其 CLI 工具：

npm install --save-dev eslint

2. 初始化 ESLint 配置 使用以下命令初始化 ESLint 配置文件：

npx eslint --init

根据提示选择适合的配置选项，这将生成一个 .eslintrc 文件。

3. 运行 ESLint 配置完成后，可以通过以下命令运行 ESLint 来检查代码：

npx eslint src/**/*.js

使用 Prettier 进行代码格式化

Prettier 是一个用于自动格式化代码的工具，确保代码风格一致。以下是使用 Prettier 进行代码格式化的基本步骤：

1. 安装 Prettier 首先，安装 Prettier：

npm install --save-dev prettier

2. 配置 Prettier 在项目根目录下创建一个 .prettierrc 文件，进行基本配置：

{
  "semi": true,
  "singleQuote": true,
  "printWidth": 80,
  "trailingComma": "es5"
}

3. 运行 Prettier 配置完成后，可以通过以下命令运行 Prettier 来格式化代码：

npx prettier --write src/**/*.js

构建与部署工具

构建与部署工具可以帮助我们将代码转换为适合生产环境的形式，并自动化部署过程。下面我们将介绍几种常见的构建与部署工具：Babel、npm scripts 和 CI/CD 工具。

使用 Babel 进行代码转换

Babel 是一个用于将现代 JavaScript 代码转换为向后兼容版本的编译器。以下是使用 Babel 进行代码转换的基本步骤：

1. 安装 Babel 首先，安装 Babel 及其预设：

npm install --save-dev @babel/core @babel/preset-env babel-loader

2. 配置 Babel 在项目根目录下创建一个 .babelrc 文件，进行基本配置：

{
 ```json
{
"presets": ["@babel/preset-env"]
}

3. **整合 Babel 与 Webpack**

   为了在 Webpack 打包过程中使用 Babel，我们需要在 `webpack.config.js` 中添加 Babel 配置：

   ```javascript
   const path = require('path');

   module.exports = {
     entry: './src/index.js',
     output: {
       filename: 'bundle.js',
       path: path.resolve(__dirname, 'dist')
     },
     module: {
       rules: [
         {
           test: /\.js$/,
           exclude: /node_modules/,
           use: {
             loader: 'babel-loader',
             options: {
               presets: ['@babel/preset-env']
             }
           }
         }
       ]
     }
   };

此配置确保在打包过程中，所有 .js 文件都会经过 Babel 的转换。

使用 npm scripts 进行自动化任务

npm scripts 是一个强大的工具，可以帮助我们在 package.json 文件中定义并运行自定义脚本。以下是使用 npm scripts 进行自动化任务的一些常见示例：

1. 定义 npm 脚本 在 package.json 文件中添加以下脚本：

{
  "scripts": {
    "build": "webpack --config webpack.config.js",
    "lint": "eslint src/**/*.js",
    "format": "prettier --write src/**/*.js",
    "start": "webpack serve --config webpack.config.js --open"
  }
}

这些脚本分别用于构建项目、检查代码规范、格式化代码和启动开发服务器。

2. 运行 npm 脚本 通过以下命令运行定义的 npm 脚本：

npm run build
npm run lint
npm run format
npm start

使用 CI/CD 工具进行自动化构建与部署

持续集成（CI）和持续部署（CD）工具可以帮助我们自动化构建和部署过程，提高开发效率和代码质量。以下是使用 GitHub Actions 进行 CI/CD 的基本步骤：

1. 创建 GitHub Actions 工作流 在项目根目录下创建 .github/workflows/ci.yml 文件，定义 CI/CD 工作流：

name: CI/CD

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: "14"
      - name: Install dependencies
        run: npm install
      - name: Lint code
        run: npm run lint
      - name: Build code
        run: npm run build
      - name: Deploy to GitHub Pages
        if: github.ref == 'refs/heads/main'
        run: |
          npm install -g gh-pages
          npm run build
          gh-pages -d dist

2. 配置 GitHub Pages 在 GitHub 仓库的设置页面中，启用 GitHub Pages 并选择 gh-pages 分支作为发布源。
3. 推送代码并触发工作流 每当代码推送到主分支时，GitHub Actions 将自动运行工作流，执行代码检查、构建和部署任务。