拾遗记5-工程化补充

npx

npx是npm 5.2版本之后附带的一个命令,通过npx可以解决项目开发过程中的问题。

  • 避免全局安装模块

npm不提倡全局安装模块,全局安装会造成一些问题,主要问题如下:

  1. 全局安装的模块会存放到本地的一个全局目录中,随着全局模块数量增加,占用空间会变大。
  2. 全局模块安装之后,当模块发布新的版本之后,需要手动更新模块。
  3. 如果在项目中使用全局模块,会造成项目和本地模块之间的关联,也就是如果别人使用该项目,需要手动安装所有依赖的全局模块,而不是通过简单的npm install就可以安装所有依赖模块。

使用npx命令就可以避免这个问题,npx可以远程执行命令。即npx会将你使用的模块下载安装到本地的临时目录,使用之后会删除临时目录中的模块。

如安装vue项目的时候,使用npm安装需要两个步骤:

  1. 安装脚手架工具 npm install -g @vue/cli
  2. 利用脚手架工具创建项目 vue create my-vue-app

使用npx:
执行npm @vue/cli create my-vue-app即可创建项目。

  • 调用项目安装模块

如果在项目中安装了某个模块,如npm install --save-dev grunt,npm无法直接调用这个模块。如果想要调用可以用以下两种方式:

  1. 将grunt命令添加到npm scripts中。
  2. 命令行运行node_modules/.bin/grunt --version 调用。

如果使用npx命令,那么npx会自动到node_modules/.bin路径和环境变量$PATH里面,检查命令是否存在,所以直接执行npx grunt --version即可调用模块。

gh-pages

利用github提供的gh-pages分支可以快速发布自己的静态项目。

发布静态项目的步骤:

  1. git clone 拷贝托管在github上面的项目。
  2. 安装依赖包并打包项目。
  3. 创建gh-pages分支,并将dist目录下的文件推送到此分支。

完成上面三个步骤之后,就完成了静态项目发布,通过特定url就可以访问此静态项目。

github actions

在github中,持续集成中的每一个步骤,如抓取代码、运行测试、发布到第三方服务就叫做action。持续集成是由多个action配合完成的。

  • workflow

工作流:表示持续集成从开始到结束的一次运行过程。

  • job

任务:表示持续集成过程中需要完成的任务,一次持续集成可以完成多个任务。

  • step

步骤:一个任务可以有多个步骤,这些步骤依次执行。

  • action

动作: 每个步骤包含多个动作。

下面的例子是为github项目添加一个基本的action,当每次代码更新后,会自动构建并将dist目录下的文件推送到gh-pages分支。

# 构建工作流名称
name: publish vue project
# 定义在哪个时机下会自动构建
on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

# 定义构建任务
jobs:
  # 任务名称
  build:
    # 构建器类型
    runs-on: ubuntu-latest
    # 步骤
    steps:
    # 拉取master分支
    - uses: actions/checkout@master
    - name: build and publish
      # 利用成熟的action执行构建任务
      uses: JamesIves/github-pages-deploy-action@master
      env:
        ACCESS_TOKEN: ${{ secrets.test }}
        BRANCH: gh-pages
        FOLDER: dist
        BUILD_SCRIPT: npm install && npm run build

npm scripts

npm 允许在package.json中,通过scripts字段定义脚本命令。

如下:

"scripts": {
  "test": "echo \"this is a test\""
}

在命令行中执行npm run test,即可输出this is a test。

调用模块命令

npm脚本命令在运行的时候会自动将node_modules/.bin目录临时添加到PATH环境变量中,因此可以通过脚本命令调用模块安装的命令。

如在项目中通过npm install --save-dev -grunt安装模块,那么在scripts脚本中,即可直接调用该模块提供的grunt命令:

"scripts": {
  "test": "grunt --version"
}

执行顺序

可以通过 & 和 && 定义脚本命令中多个任务的执行顺序

  • & 并行执行
"scripts": {
  "test": "node ./test1.js & node ./test2.js"
}

表示 node ./test1.js和node ./test2.js两个任务会同时执行。

  • && 顺序执行
"scripts": {
  "test": "node ./test1.js && node ./test2.js"
}

表示 node ./test1.js和node ./test2.js两个任务会依次执行。

钩子pre post

npm为脚本命令提供了两个钩子:pre和post,即如果在scripts字段中定义了pretest、test、posttest三个命令,那么当执行npm run test命令的时候,npm会首先执行pretest命令,再执行test命令,最后执行posttest命令。

获取变量

可以在npm脚本命令中通过npm_package_前缀获取package.json中的变量。

如package.json:

{
  "name": "npm-scripts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "keywords": [],
  "author": "",
  "license": "ISC"
}

在test.js脚本中:

console.log(process.env.npm_package_name)

在脚本命令中:

"scripts": {
  "test": "node test.js",
}

当运行命令的时候,可以在控制台输出package.json中name字段的值。

识别命令

在npm脚本中可以通过npm_lifecycle_event返回当前正在运行的脚本名称。

在test.js脚本中:

console.log(process.env.npm_lifecycle_event)

在脚本命令中:

"scripts": {
  "test": "node test.js",
}

当运行命令的时候,可以在控制台输出当前正在执行的命令test。

阅读 94

推荐阅读