Angular 工具篇之npx及angular-cli-ghpages

今天本文的两个主角是 npx 及 angular-cli-ghpages，npx 是 npm 5.2 引入了的新的工具， 用于帮助我们执行 npm 二进制任务和加速我们的工作流。而 angular-cli-ghpages 这个工具，是用于帮助 Angular CLI 的用户快速发布 Angular 应用到 Github Page。

npx

安装

首先执行以下命令查看当前 npm 的版本：

$ npm --version

在我?上输出的结果是：

$ npm --version
6.1.0

如果你本地当前 npm 的版本大于 5.2，那么 npx 可以直接使用。当然你也可以运行下面的命令，进行进一步确认：

$ which npx
/Users/fer/.nvm/versions/node/v9.11.0/bin/npx

如果发现本地无法直接使用 npx，我们需要以全局的方式安装一下 npx：

$ npm install -g npx

简化本地库的调用

一般情况下，如果你希望运行本地项目非全局安装的第三方依赖库，你需要使用以下方式执行命令：

$ node_modules/.bin/source-map-explorer dist/main.d72e9d91fd17f9fe7b8c.js

（示例来源 —— Angular 工具篇之分析包的大小)

然而，如果使用 npx 的话，我们就可以简化上述的命令，如：

$ npx source-map-explorer dist/main.d72e9d91fd17f9fe7b8c.js

上述的命令，将会运行本地项目中安装的 source-map-explorer 这个库。

一次性执行外部库

对于不经常使用的全局二进制文件，你可以不在本机上进行全局安装，而是在需要时使用 npx 即时下载并执行二进制文件。这是构建工具（如 Create React App 或 webpack CLI）所使用的方式。它确保你始终使用最新版本的生成器或构建工具，而无需在每次使用它时进行升级。

下面是使用 create-react-app 开启一个新的 React 项目，这里的 create-react-app 可以不需要在本机上安装过：

$ npx create-react-app best-todo-app-ever

另一个示例是在当前目录下启动一个 http-server 服务器：

$ npx http-server

运行不同版本的包

假设我们需要使用最新版的 uglify-js：

$ npx uglify-js --version

此外你也可以指定使用包的版本，比如：

$ npx uglify-js@2.8.29 --version

因此利用这个特性，我们就可以方便地完成特定的任务：

$ npx uglify-js@3.1.0 main.js -o ./dist/main.js

angular-cli-ghpages

在使用 angular-cli-ghpages 前，请确保本地已经安装了 Node.js 及 Angular CLI。你可以通过 Angular CLI 创建新的项目或在想要部署到 Github Pages 上的 Angular 项目中使用 angular-cli-ghpages。

首先你需要运行一下命令安装 angular-cli-ghpages：

$ npm i angular-cli-ghpages --save-dev

假设你已经完成项目的开发，在发布到 Github Pages 前，你需要进行项目构建，这时你可以执行以下命令：

$ ng build --prod -- -href "https://USERNAME.github.io/REPOSITORY_NAME/"

或者使用以下命令：

$ ng build --prod -- -href "/REPOSITORY_NAME/"

在项目构建完成后，就可以通过以下的命令自动地把本地项目发布到 Github Pages 上：

$ npx ngh [OPTIONS]

需要注意的是对于使用 Angular CLI 6 以上版本的用户来说，在部署时你需要指定部署的目录：

$ npx ngh --dir=dist/[PROJECTNAME]

通常情况下，[PROJECTNAME] 的参数值可以在 angular.json 文件中找到。

参考资源

• Speed Up Your npm Workflow With npx