1、自动化构建
构建过程就是 源代码 转换成 生产代码 的过程
为什么构建(构建内容)
一些代码需要编译(css,js),保证浏览器的兼容性:将 Less 或 Sass 转换成 css;将 ES6+ 的新语法转成 ES5
有些代码需要压缩(css、js、HTML、图片等):压缩后的代码体积更小,加载更快,节省带宽
有些代码需要做格式化校验,统一代码风格
将less 转 css : 安装 less 插件(npm i less -g); 通过 lessc 命令转换(lessc input.less output.css)
自动化构建:自动化构建是指将手动构建任务,通过命令自动执行的过程
2、npm script 实现自动化构建的最简方式
什么是 npm script
npm 允许在 package.json 文件中,使用 script 字段定义脚本命令
npm script自定义脚本命令 : 声明命令(package.json) "script":{"foo":"node bar.js"}; 执行命令 npm run foo 等同于 node bar.js
npm script 任务的执行方式:
并行(parallel): 任务之间没有先后顺序,同时执行可以提高执行效率 (并行执行)在 windows 下不起作用
串行(series):任务之间有先后顺序,先执行前一个任务,后执行下一个任务
npm-run-all: 安装 npm i npm-run-all -D
并行执行: npm-run-all -p 脚本1 脚本2 简写 run-p 脚本1 脚本2
串行执行: npm-run-all -s 脚本1 脚本2 简写 run-s 脚本1 脚本2
3、构建样式文件
将 less 转成 css npm i less -g lessc input.less output.css
压缩 css 文件 npm i minify -g
步骤: 初始化项目(npm init --yes); 添加 script 命令(less+minify); 执行 script 命令(npm run 命令)
4、构建脚本文件
将 不兼容的ES6新语法 转成 兼容性好的ES5
Babel插件可以将 ES6+ 语法转成 ES5
babel 转换命令
单个文件:babel input.js --out-file output.js 或 babel input.js -o output.js
整个目录: babel src --outd-dir dist 或 babel src -d dist
步骤:初始化项目(npm init --yes); 安装Babel (npm install -g babel-core babel-cli) ; 安装转码规则(npm install -D babel-preset-env); 配置转换规则(.babelrc); 在 npm script 中添加转换命令(babel src -d dist); 执行转换命令
5、代码格式校验
不同的工程师,写的代码风格不同;项目代码提交时,需要保持统一的代码格式
可以通过工具完成代码格式校验:提供代码规范,根据编码规范,自动检查代码
ESLint:对 JavaScript 代码格式进行检查 https://eslint.org/
初始化项目(npm init --yes)
安装 ESLint(npm i eslint -g)
初始化配置文件(eslint --init)
检查 js 代码格式 : 单个文件 (eslint path/filename.js) 整个目录 (eslint path/dirname)
StyleLint: 对 css 代码格式进行检查
初始化项目 (npm init --yes)
安装 StyleLint(npm install --global styleLint)
安装检测标准(npm install --global stylelint-config-standard)
创建配置文件(.stylelintrc.json)
检查 CSS 代码格式: 单个文件(stylelint path/filename.css) 整个项目(stylelint **/*.css)
在拉钩学习的笔记(二十二)自动化构建
最新推荐文章于 2024-08-29 14:39:38 发布