自动化构建npm scripts和代码格式校验工具

Devil
537 阅读5分钟

自动化构建

什么是构建

  • 构建的过程：就是厨师将原始的食物，通过各种手段，做成可以实用的饭菜。

为什么构建（构建内容）

一些代码需要编译（CSS,JS），保证浏览器的兼容性

  • 将Less或Sass转换成CSS
  • 将ES6+的新语法转成ES5

有些代码需要压缩（CSS,JS,HTML,图片等）

  • 压缩之后的代码体积更小，加载更快，节省带宽。

有些代码需要做格式化校验，统一代码风格

构建的过程

  • 源代码 -> * 编译、压缩、格式化.... -> 生产代码

构建初体验

将less文件转换成css文件

步骤

  • 安装less插件 npm i less -g
  • 检查是否安装成功 lessc -h (备注：c -> complie编译)
  • 通过lessc命令转换 lessc input.less output.css

什么是自动化构建？

  • 把所有可能的任务，按照一定的逻辑排列组合在一起，最终通过一条命令，把所有的任务都执行了。

自动化构建过程

  • 源代码 -> 转换 -> 压缩 -> 生产代码

自动化构建过程.png

npm scripts

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

什么是npm scripts

  • npm允许在package.json文件中，使用scripts字段定义脚本。

npm scripts 自定义脚本命令

声明命令（package.json）

"scripts":{
    "foo": "node bar.js"
}

执行命令(命令行)

// 两条命令相同的效果
$ npm run foo
$ node bar.js

举例：自动化构建样式文件

  • 手动：lessc index.less index.css
  • 自动
// 1.在package.json中定义构建任务
"scripts":{
    "style":"lessc index.less index.css"
}
// 2.命令行中执行任务
npm run style

npm scripts中任务的执行方式（并行 / 串行）

npm_scripts命令的执行方式.png

并行执行（parallel）

  • 任务1 & 任务2
  • 任务之间没有先后顺序，同时执行可以提高执行效率。

串行执行（series）

  • 任务1 && 任务2
  • 任务之间有先后顺序，先执行前一个任务，后执行下一个

&(并行执行)在Window下不起作用

  • npm-run-all插件
// 1.现在项目中安装
npm i npm-run-all -D
// 2.并行执行：其中p是parallel（并行）的意思
npm-run-all -p 脚本1 脚本2 脚本3
// 或简写
run-p 脚本1 脚本2 脚本3

// 2.串行执行 其中s是series(串行)的意思
npm-run-all -s 脚本1 脚本2 脚本3
// 或简写
run-s 脚本1 脚本2 脚本3

npm scripts实践

  • 这里需要安装server服务器
  • 执行命令：npm i server -g
  • 发布http的服务

构建样式文件

  • 将 less 转成 css
    • npm i less -g
    • lessc input.less output.css
  • 压缩 css 文件
    • npm i minify -g
    • minify output.css > output.min.css

步骤

  • 初始化项目(npm init --yes)
  • 添加script命令(less + minify)
  • 执行scripts命令(npm run 命令)

构建源码

// 1. 在package.json文件中script标签中声明命令
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "p":"lessc test.less test.css && minify test.css > test.min.css"
}
// 2.执行命令（命令行）
npm run p

构建脚本文件

  • 存在兼容性问题：比如ES6的箭头函数在IE浏览器就存在兼容问题

Babel插件

  • 可以将ES6+新语法转换成ES5

ECMAScript的版本和发布时间

  • 2009年：ES5
  • 2015年：ES6
  • 2016年：ES2016
  • 2017年：ES2017
  • 2018年：ES2018

Babel转换规则

  • babel-preset-es2018: ES2018转换ES2017
  • babel-preset-es2017：ES2017转换ES2016
  • babel-preset-es2016：ES2016转换ES6
  • babel-preset-es2015：ES6转换ES5
  • babel-preset-env：ES2018~ES6 全部转换成 ES5

Babel转换命令

  • 单个文件
    • babel input.js --out-file output.js
    • 或 babel input.js -o output.js
  • 整个目录
    • babel src --out-dir dist
    • 或 babel src -d dist

步骤

  • 初始化项目 npm init -yes

  • 安装Babel npm install -g babel-core babel-cli

    • babel-core: babel转换核心API babel-cli: babel命令行

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

  • 配置转换规则 .babelrc

    • 一定要在项目的根目录下创建。
    • 配置文件书写代码
    // 一段json格式的代码
{
  "presets":[
      "env"
  ]
}

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

    • src 表示 已有的文件夹的名称
    • dist 表示 需要生成的文件夹的名称
    • babel scripts -d js

  • 执行命令 npm run “名字”

    • 就可以将scripts文件夹下的所有脚本文件全部转换成满足ES5语法的文件。

代码格式校验

为什么

  • 不同的工程师，写的代码风格不同
  • 项目代码提交时，需要保持统一的代码格式

如何实现（通过工具完成代码格式校验）

  • 提供编码规范
  • 根据编码规范，自动检查代码

ESLint

  • 对JavaScript代码格式进行检查

步骤

  • 初始化项目 npm init --yes

  • 安装ESLint npm i eslint -g

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

    • 会生成一个.json的文件
    • (自定义检查规范)可以在里面的rule字段，设置自己的要求 
        "rules": {
        "indent":["error",2]
    }

  • 检查JS代码格式

    • 单个文件 eslint path/filename.js
    • 整个目录 eslint path/dirname

如果想要知道更多自定义的属性，去eslint.org官网查看

  • indet:["error",2]
    • 空格缩进2格，违反的报错error
  • quotes:["error","double"]
    • 字符数据的串，不能使用双引号。

StyleLint

  • 对css代码格式进行检查

步骤

  • 初始化项目 npm init --yes

  • 安装StyleLint npm install --global stylelint

  • 安装检测标准 npm install -global stylelint-config-standard

  • 创建配置文件 .stylelintrc.json

    • 书写代码 
        {
    "extends":"stylelint-config-standard"
  }
    • 添加自定义规则: 官网查找stylelint.io 
        "rules":{
      "block-no-empty":true
  }

  • 检查CSS代码格式

    • 单个文件 stylelint path/filename.css
    • 整个项目 stylelint **/*.css
avatar
文章
阅读
粉丝