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。