NPM Pack详解

发布时间：2023-05-19

一、NPM Pack介绍

NPM Pack 能够将开发人员的代码打包成一个压缩包并且发布到 NPM 公共仓库供其他人使用。本文将从NPM Pack的基本使用到常见问题解答以及高级应用场景方面进行详细介绍和阐述。

二、基本使用

安装好Node.js和npm后，通过npm init初始化项目文件夹，npm init --yes表示初始化默认的配置文件。在node.js中根据package.json文件打包代码，方法为npm pack，运行该命令后会在该项目的根目录下生成一个文件名以相应项目名称开头的.tgz文件，这个文件就是我们要发布到npm公共仓库的代码包。 为了发布到npm公共仓库，需要在npmjs.com上注册一个npm账号，并将代码包上传上去。 在发布之前，一定要进行配置，用npm login命令登录npm账户。通过以下命令进行npm账户的配置:

npm login

如果需要取消已有的账户配置，可以使用以下命令:

npm logout

登录成功后，使用npm publish命令发布代码包，这样其他开发人员就能够通过npm install来安装使用了。

npm publish

三、常见问题解答

1. 如何打包成指定名称的.tgz文件：

使用以下命令：npm pack . --name=pkgname。例如：

npm pack . --name=mylib

2. 如何忽略某些文件：

在package.json中使用"files"属性配置要发布的文件。

"files": [
   "src",
   "dist",
   "README.md"
 ],

"files"属性告诉npm哪些文件将被包括在tarball中。为了发布前忽略一些文件，一般使用.gitignore文件，这些文件将直接忽略。

4. 如何通过npmignore文件忽略文件

添加.npmignore文件，使用.ignore文件的规则，与.gitignore文件类似。npm publish时，.npmignore文件优先于.gitignore文件，ignore掉的文件将不会存在于发布的包中。

5. 如何使用.gitignore和.npmignore配置同时取消忽略文件：

在.gitignore中加入!filename表示filename文件需包含，在.npmignore中加入!filename表示filename文件在npm publish时不会被忽略。

四、高级应用场景

1. 将babel打包到代码中：

通常在发布NPM包的时候，代码文件必须要是浏览器可用的。但是在JavaScript变革迅猛的现在，ES6、ES7、TS等编译后的JavaScript代码存在一些浏览器不兼容问题。 为了解决这个问题，将最新的Babel打包到应用中。这样我们甚至可以在我们的打包脚本运行之前，使用ES6的语法。 首先安装babel-core：

npm install babel-core --save-dev

配置文件.babelrc：

{
   "presets": [
       ["env", {
           "targets": {
               "browsers": [
                   "last 2 versions",
                   "Firefox ESR",
                   "ie >= 9"
               ]
           }
       }]
   ]
}

创建src文件夹，新创建index.js。package.json文件中的main选项指向src/index.js：

{
   "name": "mylib",
   "version": "0.0.1",
   "main": "src/index.js"
}

在package.json的scripts属性中创建一个新的打包脚本：

"scripts": {
   "build": "babel src -d dist"
}

然后运行npm run build打包，此时会在dist目录下生成所有被Babel编译后的文件，如果你的工程环境没有被设置为编译 ES6，那么是无法正常运行的。

2. 将项目源文件打包到代码中：

一般来说，我们发布的npm包不应该包含源码文件，但是在向开源社区发布时，我们需要对外公开源码，实际的打包命令为：

npm pack --ignore-scripts

将源文件集打包到源代码包中：

npm pack --ignore-scripts && tar cf source.tar --exclude='.git' . && tar --append -f *.tgz ./source.tar --transform 's|source/||'

zip格式：

npm pack --ignore-scripts && find ./src -type f -iname "*" -print | zip code.zip -@

3. 在npm下载包时引导进行配置：

很多npm包下载完成后需要进行一些配置操作，例如配置config等信息，而npm install命令单独调用是不支持向用户询问配置值的，这时我们可以使用postinstall脚本执行一些操作。它会在npm install完成后执行，此时，通过命令行向用户询问配置值，之后存储在用户目录下的.npmrc中，下一次便可以从该文件中直接配置好默认值，省去了用户询问。 npm install完后，运行脚本：

const readlineSync = require('readline-sync');
const fs = require('fs');
let value = readlineSync.question("Please enter your config value: ");
let content = fs.readFileSync(process.env.HOME + '/.npmrc');
fs.writeFileSync(process.env.HOME + '/.npmrc', content.toString() + '\nconfig=' + value);

以上代码意思是用readline-sync让用户输入配置，将读取的配置文件内容复制到内存，写入用户目录下的.npmrc文件中，完成配置的存储。

四、总结

本文认真阐述了npm pack的基本使用方法和一些高级应用场景。希望开发者们能够丰富自身知识储备，在项目开发中能够灵活地使用npm pack工具。

推荐文章