如何搭建npm包

時間 2019-11-05

標籤如何搭建 npm 简体版

原文原文鏈接

本文將從如下幾個方面分享如何搭建一個npm包，在搭建過程當中須要注意的事項javascript

初始化
入口
依賴
文件
版本號管理
自動化發佈

初始化

在項目根目錄下執行：npm init 建立 package.json 文件，這也是npm包的核心配置文件java

入口

package.json 中能夠經過下面兩個字段來指定入口文件：node

main 指向 commonjs 模塊的入口，使用 require 語法引入
module 指向 ES2015 模塊的入口，使用 import 語法引入，支持webpack等構建工具的 tree shaking 優化

這裏，能夠展開介紹一下 umd、commonjs、es module 模塊類型的區別webpack

umd 是兼容 commonjs、amd 的通用模塊規範，支持全變量規範，能夠直接經過<script>標籤引入，寫法以下：

(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
	typeof define === 'function' && define.amd ? define(factory) :
	(global['xxx'] = factory());
}(this, (function () { 'use strict';
    ...
})));
複製代碼

commonjs 使用module.exports定義模塊對外輸出的接口，使用require加載模塊
es module 是ES6模塊，使用export、import語法

而通常npm包都須要支持以上三種模塊規範，如下列出通用的rollup配置：git

import path from 'path';
import babel from 'rollup-plugin-babel';
import cleanup from 'rollup-plugin-cleanup';
import replace from 'rollup-plugin-replace';
import { uglify } from 'rollup-plugin-uglify';
import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import pkg from './package.json';

const { version, name, author } = pkg;

const banner = `/*! * ${name} v${version} * (c) ${new Date().getFullYear()} ${author} */`;

const resolve = p => {
    return path.resolve(__dirname, p);
}

const pluginsCommon = [
    commonjs({
        // polyfill async/await
        'node_modules/@babel/runtime/helpers/asyncToGenerator.js': ['default']
    }),
    nodeResolve({
        module: false,
    }),
    babel({
        runtimeHelpers: true,
    }),
]

export default [
    {
        input: resolve('src/index.js'),
        plugins: pluginsCommon.concat([
            cleanup(),
        ]),
        output: {
            file: resolve(`dist/npmpackage-name-${version}.js`),
            format: 'umd',
            name: 'npmpackage-name',
            banner,
        }
    },
    {
        input: resolve('src/index.js'),
        plugins: pluginsCommon.concat([
            uglify(),
        ]),
        output: {
            file: resolve(`dist/npmpackage-name-${version}.min.js`),
            format: 'umd',
            name: 'npmpackage-name',
            banner,
        }
    },
    {
        input: resolve('src/index.js'),
        plugins: pluginsCommon.concat([
            cleanup(),
        ]),
        output: [
            {
                file: resolve(`dist/npmpackage-name.es.js`),
                format: 'es',
                banner,
            },
            {
                file: resolve(`dist/npmpackage-name.js`),
                format: 'cjs',
                banner,
            }
        ]
    },
];
複製代碼

再附上對應的babel配置：github

{
    "presets": [
        ["@babel/preset-env", {
            "targets": {
                "browsers": ["Android >= 4", "iOS >= 8"]
            },
            "modules": false,
            "loose": true
        }]
    ],
    "plugins": [
        "@babel/plugin-external-helpers",
        [
            "@babel/plugin-transform-runtime",
            {
                "regenerator": true
            }
        ]
    ]
}
複製代碼

以上，配置則能構建出知足以上三種模塊規範的文件web

相應的package.json文件中，也須要經過不一樣的字段，來指定對應模塊規範的入口文件，以下：npm

{
    ...
    "main": "dist/npmpackage-name.js",
    "module": "dist/npmpackage-name.es.js",
    ...
}
複製代碼

而dist/npmpackage-name-${version}.js的文件，則能夠直接經過<script>標籤引入json

注意：不要將入口文件指定爲未過babel的文件，這每每會致使使用了此包的項目出現兼容問題bash

依賴

package.json中跟npm包依賴相關的字段主要有：

dependencies：項目運行時所依賴的模塊
devDependencies：項目開發時所依賴的模塊
peerDependencies：這是「同伴依賴」，一種特殊的依賴，在發佈包的時候須要。有這種依賴意味着安裝包的用戶也須要和包一樣的依賴。（在安裝包時會提示）

咱們在開發npm包過程當中，須要注意安裝依賴的類型。

對於那些對版本有強要求的依賴，爲了不因依賴版本不一致致使問題，須要將此類依賴安裝在 peerDependencies 中

文件

一個npm包通常包括源文件、構建產出的文件、demo文件、測試文件等文件，而爲了減少npm包大小，加快下載速度，發佈時應該將無用的文件剔除掉，有兩種方式：

使用 package.json 中的 files 指定須要發佈的文件
在 .npmignore 文件中指定須要提出的文件

版本號管理

每發佈一個版本，版本號須要相應的升級（不要手動在package.json中維護）

應該經過npm version來對版本號進行管理，版本號有如下幾種類型：

major: 主版本號
minor: 次版本號
patch: 補丁號
premajor: 預備主版本
preminor: 預備次版本
prepatch: 預備補丁號
prerelease: 預發佈版本

版本號管理策略以下：

版本號格式：主版本號.次版本號.修訂號
主版本號：有不兼容的 API 修改
次版本號：有向後兼容的功能性新增
修訂號：有向後兼容的問題修正

而升級對應的版本號的命令則以下:

npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease [--preid=<prerelease-id>] | from-git]
複製代碼

發佈自動化

package.json配置以下：

{
    "scripts": {
        "build": "rm -rf dist && rollup --config",
        "release_major": "npm version major",
        "release_minor": "npm version minor",
        "release_patch": "npm version patch",
        "postversion": "npm publish",
        "prepublishOnly": "npm run build"
    },
}
複製代碼