关于前端:拾遗记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。