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

原文链接:segmentfault.com

上一篇:input-number
下一篇:image-encode

相关推荐

  • (前端工程化01)私人管家-包管理器

    字数:3883, 阅读时间:10分钟,点击阅读原文 目录: 磨刀篇-开发环境搭建 私人管家-包管理器 待续 包管理器 在很久很久以前,那时候的前端被大家”亲切“的称为“切图仔”,那时前...

    6 个月前
  • (前端工程化01)私人管家-包管理器

    字数:3883, 阅读时间:10分钟,点击阅读原文 目录: 磨刀篇-开发环境搭建 私人管家-包管理器 待续 包管理器 在很久很久以前,那时候的前端被大家”亲切“的称为“切图仔”,那时前...

    6 个月前
  • (前端工程化01)私人管家-包管理器

    字数:3883, 阅读时间:10分钟,点击阅读原文 包管理器 在很久很久以前,那时候的前端被大家”亲切“的称为“切图仔”,那时前端的工作非常简单,仅仅只是将设计图还原,然后加上一些交互和...

    6 个月前
  • 重新认识prettier及如何工程化

    背景 对前端代码进行格式化时大多数同学都用到过prettier,例如在vscode中安装prettier插件,即可格式化任意文件,或者只格式化文件的选中部分。 prettier起到的作用是按照统一...

    1 年前
  • 谈谈前端工程化 js加载

    当年的 js 加载 在没有 前端工程化之前,基本上是我们是代码一把梭,把所需要的库和自己的代码堆砌在一起,然后自上往下的引用就可以了。 那个时代我们没有公用的cdn,也没有什么特别好的方法来优化加载j...

    2 年前
  • 拾遗记4:this指向

    JavaScript中this的指向取决于function被谁调用,而不取决于其定义。示例一 function fn() { console.log(this) } fn()上例中,fn是被...

    4 个月前
  • 拾遗记3: Async/Await执行时机

    前置知识 想要了解Async/Await关键字内部是怎么运行的?在什么时机运行?需要提前了解js异步编程,宏任务、微任务概念。 js异步编程 浏览器是多线程的,其包含如下多个线程: js主引擎 aj...

    4 个月前
  • 拾遗记1:VOvsAO

    js执行过程 当浏览器中的GUI线程解析html过程中发现js代码后,会告知Browser进程下载js文件。js文件下载完成后,js主引擎解析并执行js。由于js主引擎和GUI线程互斥,所以在js执行...

    4 个月前
  • 工程化下的SSR初探-降级渲染

    该文章阅读需要 7 分钟,更多文章请点击本人博客halu886 概念 思路 集成 Router 和 Store 抽象逻辑层 客户端激活 踩坑 总结 概念 在续上篇 ssr 骨架搭建之...

    7 个月前
  • 工程化——前端静态资源缓存策略

    增量更新是目前大部分团队采用的缓存更新方案,能让用户在无感知的情况获取最新内容。具体实现方式通常是(一般我们通过构建工具来实现,比如webpack): 构建产出文件hash(如:index.d94f...

    2 年前

官方社区

扫码加入 JavaScript 社区