NPM Pack詳解

一、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

將#）source文件集打包到源代碼包中：

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工具。