自动化构建

小流江河
674 阅读7分钟

自动化构建

什么是构建

所谓构建，是指将源代码转换成生产代码的过程。

image.png

为什么需要将源代码转换成生产代码？或者说需要构建哪些内容？

  • 代码需要编译（ CSS3，JS6+ ）， 保证浏览器的兼容性
  • 代码需要压缩（ CSS，JS，HTML，图片等 ）。节省带宽，提高加载速度
  • 代码需要做格式化校验，统一代码风格。

以上这些问题，都是构建的内容。

什么是自动化构建

不管是代码压缩还是 less 转换，通过手动方式进行工作量巨大（例如手动压缩2000行代码，估计程序员就疯了）。
自动化构建是指将手动构建任务，进行排列组合，然后通过命令（或工具）自动执行的过程。
实现自动化构建最简单的方式是 npm scripts （npm 脚本）。

npm scripts

npm 允许在 package.json 文件里面，使用 scripts 字段定义脚本命令。

{
  "scripts": {
    // 命令名称: 任务
    "foo": "node bar.js"
  }
}

scripts 字段是一个对象。它的每一个属性，对应一段脚本。比如，foo 命令对应的脚本是node bar.js。

# 命令行下使用 npm run <命令>，就可以执行这段脚本。
npm run foo
# 等同于执行
node bar.js

image.png

npm scripts任务的执行方式

如果 npm 脚本里面需要执行多个任务，那么需要明确它们的执行顺序。 如何选择正确的任务执行顺序？

  • 串行执行：任务之间有明确的先后顺序，必须先执行前一个任务，然后才能执行下一个任务
    • 相当于 4X100 接力，拿到上一个队员的接力棒后，下一个队员才能继续跑
  • 并行执行：任务之间没有明确的先后顺序，同时执行，可以提高效率
    • 相当于 100 米短跑，8个人同时起跑 image.png 如果是并行执行（即同时的平行执行），可以使用 & 符号。
{
  "scripts": {
    "parallel": "node task1.js & node task2.js & node task3.js"
  }
}

如果是串行执行（前一个任务成功后，才执行下一个任务），可以使用 && 符号。

{
  "scripts": {
    "series": "node task1.js && node task2.js && node task3.js"
  }
}

但是，& 符号在 Windows 操作系统下不起作用。 此时，我们可以借助插件，在 Windows 下实现并 npm-run-all

 # 先在项目中安装
npm i npm-run-all -D
   
# 并行执行：其中 p 是 parallel（并行）的意思
npm-run-all -p 脚本1 脚本2 脚本3
# 或简写为 
run-p 脚本1 脚本2 脚本3
   
# 串行执行：其中 s 是 series（串行）的意思
npm-run-all -s 脚本1 脚本2 脚本3
# 或简写为
run-s 脚本1 脚本2 脚本3

构建样式文件

构建样式文件就是将开发环境下的 CSS （包括 Less 或 Sass）源代码，转成线上环境使用的代码。这里的构建任务可能有多个。
以构建Less编译和压缩的样式文件为例：

  1. 编译 less 文件
# 安装 less 包，编译 less 文件
npm i less -g

# 在 package.json 中，添加 less 解析命令
"scripts": {
    "style": "lessc style.less style.css",
}

# 执行命令（自动编译）
npm run style
  1. 压缩 css 文件
# 安装 minify 包, 压缩文件
npm i minify -g

# 在 package.json 中，添加 minify 压缩命令
"scripts": {
    #                              先编译 && 然后压缩
    "style": "lessc style.less style.css && minify style.css > style.min.css",
}

# 执行命令（自动编译）
npm run style

构建脚本文件

为解决ES6+的浏览器兼容问题，我们需要构建脚本文件来处理。

在开发过程中，经常使用 ES6+ 新特性时，一些旧的浏览器，不支持 JS 的新语法。所以，在项目上线之前，就需要将新的语法特性解析成兼容性更好的 ES5 。最常用的编译工具是 Babel，Babel插件可以将ES6+新语法转成ES5。 Babel官网：babeljs.io/

构建步骤：

  1. 初始化项目（npminit-yes）
  2. 安装Babel（npminstall-gbabel-corebabe卜cli）
  3. 安装转换规则（npminstall-gbabel-preset-env）
  4. 配置转换规则（）
  5. 在npm scripts中添加转换命令（babelsrc-ddist）
  6. 执行转换命令
# 安装 babel核心，Babel客户端
npm i -g babel-core babel-cli

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4619ed4d23244cff818573e629536278~tplv-k3u1fbpfcp-watermark.image)
# 安装转码规则
npm i -g babel-preset-env

# 在项目根目录下，新建 .babelrc 文件（注意文件名前有一个点），并添加转换规则
{
    "presets": [
      "env"
    ],
}

# 通过 babel 编译单个 j s文件
babel input.js --out-file output.js
# 或者
babel input.js -o output.js
    
# 通过 babel 编译整个目录
babel js --out-dir scripts
# 或者
babel js -d scripts

# 在 package.json 中，添加 babel 解析命令
"scripts": {
    "script": "babel js -d scripts",
}

# 执行命令（自动编译）
npm run script

如果 Babel 是局部安装。则babel 的可执行路径是：./node_modules/.bin/babel

命令需要做相应的调整

babel js -d scripts ===> ./node_modules/.bin/babel js -d scripts

添加压缩命令

# 在 package.json 中，添加 babel 解析和压缩命令
"scripts": {
    "script": "babel js -d scripts && minify scripts/main.js > scripts/script.min.js",
}

自动化构建对于现代的前端开发非常关键，这也催生了很多优秀的自动化构建工具。这里推荐Gulp。

代码格式校验

每个程序员都有自己的编码习惯，最常见的莫过于：

  • 有的人代码结尾必须加分号 ;，有的人觉得不加分号 ; 更好看；
  • 有的人写字符串时，喜欢用双引号，而有的人喜欢用单引号；
  • 有的人代码缩进喜欢用 4 个空格，有的人喜欢用 2 个空格；

诸如此类，但是项目开发一般是多人协作，所以，不同的工程师，写的代码风格不同。一般你写自己的代码怎么折腾都没关系，但整个项目需要有一个统一的编码规范。这样别人看源码就能够看得懂。

那么问题来了，总不能一行行去检查代码吧，这是一件很蠢的事情。凡是重复性的工作，都应该通过工具来完成。

这个工具应该做两件事情：

  1. 提供编码规范
  2. 根据编码规范，自动检查代码。

在前端工程化中，不同的代码，使用不同的工具进行检测。

例如：通常我们使用 ESLint 来检测 JavaScript 代码；我们使用 StyleLint 来检测 CSS 代码。

ESLint使用

ESLint 是 JSLint 的升级版本，是用来检查 JS 代码质量的插件。通过 ESLint 可以统一不同开发者的代码风格。

官网：eslint.org/

ESLint使用步骤：

  1. 初始化项目（npm init --yes）
  2. 安装ESLint（npm i eslint -g）
  3. 初始化配置文件（eslint --init）
  4. 检查JS代码格式
    • 单个文件(eslint path/filenamejs)
    • 整个目录(eslint path/dirname)

先创建项目

mkdir lint-demo
cd lint-demo

# 初始化项目，生成 package.json
npm init --yes

安装 ESLint：

但使用 EsLint 有一个先决条件：Node.js (>=6.14), npm version 3+。

$ npm i eslint -g

初始化一个配置文件：

# 之后进入交互窗口，询问一些问题；根据问题生成配置文件 例如：.eslintrc.json
$ eslint --init

配置规则

rules: { "规则名": [规则值, 规则配置] }

其中规则值有以下 3 种：0 = off, 1 = warn, 2 = error

"off" 或 0 - 关闭规则

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

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

更多规则详情查看：eslint.org/docs/rules/

# 配置检测规则
{
    "env": {
        "browser": true,
        "commonjs": true,
        "es2021": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 12
    },
    "rules": {
        "indent": [ "error", 2 ],       # 使用两个空格缩进
        "quotes": [ "error", "double" ] # 使用双引号包裹字符串
    }
}

之后，你可以在任何文件或目录上运行ESLint如下：

$ eslint yourfile.js

拓展阅读：检测 JS 代码风格的工具有多个，除了 ESLint, 另一个常用的是 Standard：

github.com/standard/st…

StyleLint使用

StyleLint 是检测 CSS 代码格式的插件。

官网：stylelint.io/

使用步骤：

  1. 初始化项目（npm init --yes）
  2. 安装StyleLint（npm install --global stylelint）
  3. 安装检测标准（npm install --global stylelint-config-standard）
  4. 创建配置文件（.stylelintrc.json）
  5. 检查css代码格式
    • 单个文件（stylelint path/filename.css）
    • 整个项目（stylelint **/*.css）

StyleLint 初体验

安装插件

代码风格标准：github.com/stylelint/s…

# stylelint 是运行工具，stylelint-config-standard 是 stylelint 的推荐配置
npm i --g stylelint stylelint-config-standard

在项目的根目录下，创建 .stylelintrc.json 文件，添加如下配置

{
  "extends": "stylelint-config-standard",
  "rules": {
    # 除了使用 stylelint-config-standard，我们还可以在 rules 字段中自定义校验规则
    "block-no-empty": true # 代码块不能为空
  }
}

运行 stylelint，检测 CSS 代码格式

# 注意：路径是写在双引号中的
# 检测一个文件
stylelint 文件路径/文件名.css

# 检测整个项目下，所有的 CSS 文件
stylelint **/*.css
avatar
文章
阅读
粉丝