拾遗记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。