升级antd4后运行构建命令报错less问题_自动化构建

好好学习，天天向上

本章主要内容是：自动化构建插件、npm scripts、ESLint、StyleLint

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

为什么构建（构建内容）

• 一些代码需要编译（CSS，JS）， 保证浏览器的兼容性
  • 将 Less 或 Sass 转换成 CSS
  • 将 ES6+ 的新语法转成 ES5
• 有些代码需要压缩（CSS，JS，HTML，图片等）
  • 压缩之后的代码体积更小，加载更快，节省带宽
• 有些代码需要做格式化校验，统一代码风格

什么是自动化构建

• 不管是代码压缩还是 less 转换，通过手动方式进行工作量巨大
• 自动化构建是指将手动构建任务，进行排列组合，然后通过命令（或工具）自动执行的过程

一、npm scripts

实现自动化构建的最简方式

1、什么是 npm scripts

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

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

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

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

2、通配符

npm 脚本就是 Shell 脚本，因为可以使用 Shell 通配符

"style": "lessc *.less"
"style": "lessc **/*.less"

* 表示任意文件名，** 表示任意一层子目录

3、执行顺序

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

如何选择正确的任务执行顺序？