module1_03_自动化构建

自动化构建

• 为什么要自动化构建，没有自动化构建是不是就不行？

  • 从某种程度上可以这么说

• 因为一些代码需要编译（css、js），保证浏览器的兼容性

  • 将 Less 或 Sass 转换成 CSS

  • 将 ES6 + 的信誉发转成ES5

  • 代码压缩等

• 总的来说自动化构建是指将手动构建任务，通过命令自动执行的过程（最终可以压缩到一条命令）

一、自动化构建初体验

1.1 将 less 转换成 css

• 安装less插件

• 通过lessc转换

• 这时候可能会遇到

  • 

  • 解决方法：

    • ① win+s 搜索powershell 以管理身份运行

    • ② 使用set-ExecutionPolicy RemoteSigned命令将计算机上的执行策略更改为 RemoteSigned,输入Y确定

1.2 npm script

• 自动化构建工具有很多种，npm script就是实现自动化构建的最简方式

  • 即使用根据package.json使用script字段定义脚本命令

  • 注意依赖的版本问题

（1）构建方式

• ① 声明命令

  • 在package中的script 写入 'foo': 'node bar.js'

• ② 执行命令

  • npm run foo 等同于 node bar.js

（2）执行命令的方式

• ① 并行执行（parallel）：用 & 连接

  • 并行执行在window下是实现不了的

• ② 串行执行（series）：用 && 连接

• 解决 & 在window环境下执行不了的问题

  • 安装 npm-run-all 插件

    • 并行执行：npm-run-all -p 脚本1 脚本2 教本3

      • 简写：run-p

    • 串行执行：npm-run-all -s 脚本1 脚本2 脚本3

      • 简写：run-s

    • 默认执行的是串行

（3）使用babel

• 转换命令

  • ① 单个文件

    • babel 文件名 --out-file 文件名

    • babel 文件名 -o 文件名

  • ② 整个目录

    • babel 目录名 --out-dir 目录名

    • babel 目录名 -d 目录名

• 步骤

  • ① 安装babel：npm i -g babel-core babel-cli

  • ② 安装转码规则：npm install -g babel-preset-env

  • ③ 配置转换规则： .babelrc

  • ④ 在 npm scripts 中添加转换命令：babel src -d dist

  • ⑤ 执行转换命令

（4）使用eslint

• 初始化项目（npm init -y）

• 安装ESLing（npm i eslint -g）

• 初始化配置文件（eslint --init）

• 检查JS代码格式

  • 单个文件（eslint path/filename.js）

  • 整个目录（eslint path/dirname）

 

• 配置规则

  • 在.eslintrc.json中

    • 比如设置缩进

      • indent里面传一个数组

        • 第一个参数：error / off / warn

        • 第二个参数：设置缩进空格数

  • {
        ...
        "rules": {
            "indent": [ "开 / 关" ]
        }
    }

  •  

（5）styleLint

• ① 初始化项目：npm init --yes

• ② 安装StyleLint：npm install --global stylelint

• ③ 安装检测标准：npm i -g stylelint-config-standard

• ④ 创建配置文件：.stylelintrc.json

• ⑤ 检查CSS代码格式

  • 单个文件：stylelint path/filename.css

  • 整个项目：stylelint **/*.css

 

• 同样也有rules，可以在官网找到