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
-
第二个参数:设置缩进空格数
-
-
-
-
{
-
-
(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,可以在官网