自动化构建和npm-script脚本

大大大石头
844 阅读5分钟

笔记来源：拉勾教育 - 大前端就业集训营

文章内容：学习过程中的笔记、感悟、和经验

自动化构建

自动化构建

构建：源代码转换为生产代码的过程

构建内容：

  • 一些需要编译的代码（css、js），保证浏览器兼容性
    • less或者sass转为css
    • ES6语法转ES5语法
  • 代码压缩
  • 统一代码风格，格式化代码

体验构建 - less转css

安装less插件 npm i less -g

命令转换 lessc xxx.less xxx.css

使用时要注意路径的问题

自动化构建

把所有从源代码到生产代码的过程通过逻辑组合在一起 ，通过命令一次性执行多个功能

npm scripts

最简单的自动化构建方式

npm允许在package.json中，使用scripts字段定义脚本命令，脚本内部可以书写node操作字段，只需要执行npm run 脚本名即可运行脚本对应的相应字段

//在package.json中书协scripts，内部书写脚本名和字段
{
  "scripts" : {
    "a":"node a.js",
    // 甚至我们可以把一些npm命令放到这里
    "style":"`lessc xxx.less xxx.css`"
  }
}

// 和package.json同目录下的a.js文件
console.log('我是脚本')

在命令行输入npm run a即可执行和node a.js相同的操作

ySRf39.png

我们可以把多条命令写在一个字段中执行

npm scripts运行方式

  • 并行执行（parallel）：任务1&任务2，任务之间没有先后顺序，同时执行提高效率
  • 串行任务（series）：任务1&&任务2，任务之间先后执行

ySfkdK.png

并行执行和串行执行可以组合操作，例如：任务1&&任务2&任务3&&任务4，这种情况下任务二和任务三可以并行执行，和任务1和任务4串行执行

并行执行在window下不起作用的解决方案

安装npm-run-all插件

// 安装插件
npm i npm-run-all -D

// 并行执行
npm-run-all -p 脚本1 脚本2 脚本3
// 并行执行简写
run-p 脚本1 脚本2 脚本3


// 串行执行
npm-run-all -s 脚本1 脚本2 脚本3
// 串行执行简写
run-s 脚本1 脚本2 脚本3


// 注意脚本1、2、3都是在jscipts中的脚本，

// package.json
"scripts": {
  // 创建三个命令
    "a": "node a.js",
    "b": "node b.js",
    "c": "node c.js",
  // 使用并行执行三个命令
    "p": "run-p a b c",
  // 使用串行执行三个命令
    "s": "run-s a b c"
  }

案例：构建样式文件

要求：把less文件转换成压缩后的css文件

方法：先转css再执行css压缩

  1. 创建文件夹（mkdir xxxxx）
  2. 转到文件夹（cd xxxxx）
  3. 初始化一个项目（npm init -yes可以直接初始化一个空项目）
  4. 书写文件less用于转换
  5. 添加scripts命令（less命令 + minify命令）
  6. 执行scripts命令（nom run 命令）
"scripts": {
  // 不用管这一行，这是默认自带的命令
    "test": "echo \"Error: no test specified\" && exit 1",
  // 使用串行命令把两条命令串在一起：less转css - css压缩文件转mini.css
    "style": "lessc ./style/style.less ./style/style.css && minify ./style/style.css > ./style/style.mini.css"
  },

使用serve插件开启http服务

使用serve插件开启HTTP服务，即可开启http服务，上面就可以直接访问地址实时查看

npm i serve -g

serve . - (.为当前目录)

构建脚本文件

ES6+语法转换ES5语法插件 -- babel

npm i babel -g

babel提供的版本语法转换功能

  • babel-preset-es2018: ES2018 >> ES2017
  • babel-preset-es2017: ES2017 >> ES2016
  • babel-preset-es2016: ES2016 >> ES6
  • babel-preset-es2015: ES2015 >> ES5

babel将ES6+语法全部转换为ES5语法

babel-preset-env

babel手动转换

  • 单个文件：
    • babel xxx.js --out-file xxx.js 简写 babel xxx.js -o xxx.js
  • 整个目录：
    • babel 目录 --out-dir 目录 简写 babel 目录 -d 目录

使用步骤：

  1. 初始化项目（npm init -yes）
  2. 安装babel（sudo npm i babel-core babel-cli -g） - 同时安装两个包，core为核心，cli为命令行
  3. 安装转码规则（sudo npm i babel-preset-env）
  4. 配置转换规则（.babelrc）- 项目根目录中创建文件
  5. 添加转换命令（babel 目录 -d 目录）
  6. 执行转换命令（npm run xxx）
{
  "presets":[
    "env"
  ]
}

"scripts": {
  // 这是上一个案例的，懒得删了，不用管
    "style": "lessc ./style/style.less ./style/style.css && minify ./style/style.css > ./style/style.mini.css",
  // 这是babel转换（babel ./js -d ./script）整个目录转ES5，&&后面是压缩命令
    "js": "babel ./js -d ./script && minify ./script/index.js > ./script/index.mini.js"
  }

代码格式校验

对代码格式进行约定并进行校验

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

ESLint - 针对js代码

步骤

  1. 初始化项目（npm init --yes）
  2. 安装ESLint（npm i eslint -g）全局安装
  3. 初始化配置文件（selint --init），会问一些问题，选择即可

检查js代码格式

  • 单个文件：eslint 文件路径
  • 整个目录：aslant 目录
// 这是整个ESlint配置文件 - selint --init生成的
// 其中rules可以自定义一些配置项，可在官网查看
{
    "env": {
        "browser": true,
        "commonjs": true,
        "es2021": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 12
    },
    "rules": {
    }
}

StyleLint - 针对CSS

步骤

  1. 初始化项目（npm init --yes）
  2. 安装StyleLint（npm i stylelint -g）全局安装
  3. 安装检测标准（npm i stylelint-config-standard），有很多套标准，standard是标准的css标准
  4. 创建配置文件（.stylelint.json）跟目录创建

检测css代码格式

  • 单个文件：stylelint 文件路径
  • 整个目录：stylelint 目录/*.css，星号通配
  • 整个项目：stylelint **/*.css，星号通配
// .stylelint.json文件
{
  //使用标准
  "extends": "stylelint-config-standard",
  // 自定义标准，可在官网查看
  "rules": {
  }
}
avatar
文章
阅读
粉丝