npm建立自己的包

一、一個簡單的建立

1、建立npm賬號

• 官網：https://www.npmjs.com/
• 建立賬號入口：https://www.npmjs.com/signup

注意：需要進入郵箱驗證

2、建立目錄及初始化

$ mkdir zqh-test
$ cd zqh-test
zqh-test> npm init

3、檔案內容及目錄結構

注意：在生成package.json中，name的名稱和專案的名稱保持一至

1. package.json

{
  "name": "zqh-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "zqh-test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "zhangqh22",
  "license": "ISC"
}
 

2. 入口檔案編寫，index.js，加一句簡單的列印

console.info('hello world');

3. 最終目錄結構

├── zqh-test
│   ├── index.js
└── └── package.json

4、釋出

1. 專案根目錄下，執行npm addUser命令，新增自己的使用者資訊

zqh-test> npm addUser

如果已經註冊過賬號，直接登入就行了

zqh-test> npm login

輸入使用者名稱、密碼、郵箱

2. 釋出

zqh-test> npm publish

釋出完成後，在自己的package裡，會看到對應的包

5、下載呼叫

1. 下載

zqh-test> npm install zqh-test -D

package.json

"devDependencies": {
    "zqh-test": "^1.0.0"
}

2. 使用

index.js

require('zqh-test');

3. 控制檯執行

zqh-test> node index.js

輸出：hello world

6、刪除釋出的包

zqh-test> npm --force unpublish zqh-test

注意：超過24小時就不能刪除了

7、廢棄包（這個包並不會刪除，只是在別人下載使用的時候會提示）

zqh-test> npm deprecate --force [email protected] "這個包不在維護了。"

7、更新包

1. 先把package.json裡的version版本號修改了，再執行publish命令就行了

zqh-test> npm publish

2. 更新（重新下載）

zqh-test> npm install zqh-test -D

二、require/import匯入及使用說明

1、目錄結構

├── zqh-test2
│   ├── index.js
│   ├── package.json
└── └── readme.md

2、index.js（相容AMD和CMD的寫法）

;(function(global) {
    "use strict";
    var MyPlugin = function(opts) {
        console.log(opts);
    };
 
    MyPlugin.prototype = {
        init: function() {
            console.log('init');
        }
    };
 
    if (typeof module !== 'undefined' && module.exports) {
        module.exports = MyPlugin;
    } else if (typeof define === 'function') {
      define(function() { return MyPlugin; });
    }
    global.MyPlugin = MyPlugin;
 
})(this);

3、readme.md（外掛說明）

4、下載使用

1. 下載

zqh-test> npm install zqh-test2 -D

2. 在index.js中引入使用

var MyPlugin = require('zqh-test2');

MyPlugin({
    name: 'MyPlugin',
    version: '1.0.1'
});

MyPlugin.prototype.init();

執行命令

zqh-test> node index.js

結果：

{ name: 'MyPlugin', version: '1.0.1' }
init

3. 在vue專案main.js中，引入使用

zqh-test> npm install zqh-test4 -D

• import方式

import MyPlugin from 'zqh-test4'
console.log(MyPlugin('hello my plugin.'))

• require方式

let MyPlugin = require('zqh-test4');
console.log(MyPlugin('hello plugin.'))

5、加git倉庫連結

1. 新增repository

"repository": {
  "type": "git",
  "url": "https://github.com/xxx/zqh_test2.git"
},

2. 釋出後，就可以在包中檢視git倉庫了

6、使用webpack打包

需要使用webpack對元件或者模組進行打包，因為可複用庫的模組化，需要適合在任何場景中進行引用，比如AMD/CMD、CommonJs、ES6、ES5等環境。從webpack打包之後的標頭檔案來看：

(function webpackUniversalModuleDefinition(root, factory) {
  if (typeof exports === 'object' && typeof module === 'object')
    module.exports = factory(); // node
  else if (typeof define === 'function' && define.amd)
    define([], factory);    //  AMD/CMD
  else if (typeof exports === 'object')
    exports["Url"] = factory(); 
  else
    root["Url"] = factory();
})(this, function () {
    // somecode
}

從程式碼可以看出，webpack打包出來的檔案是支援多場景的引用方式的。

下面我們只需要在webpack.config.js裡新增libraryTarget配置，設為umd模式

output: {
  libraryTarget: "umd"
}

目錄結構：

├── zqh-test4
│   ├── build
│   ├── ├── main.min.js
│   ├── index.js
│   ├── package.json
└── └── webpack.config.js

1. package.json

{
  "name": "zqh-test4",
  "version": "1.0.4",
  "description": "",
  "main": "./build/main.min.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "zhangqh22",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.1.0"
  }
}

main是最終引入的檔案

• 初始化安裝

zqh-test> npm install

2. webpack.config.js指定umd模式

const webpack = require('webpack')
const path = require('path')

module.exports = {
  entry: ['./index.js'],
  output: {
    path: path.resolve(__dirname, './build'),
    filename: '[name].min.js',
    libraryTarget: 'umd'
  }
}

3. index.js

module.exports = {
  foo() {
    console.log('foo');
  },
  bar() {
    console.log('bar')
  }
}

使用webpack打包

zqh-test> webpack

4. 重新發布

zqh-test> npm login
zqh-test> npm publish

5. 在vue專案中安裝使用

zqh-test> npm install zqh-test4 -D

main.js

import {foo} from 'zqh-test4'
foo(); // foo

參考連結：

• http://www.cnblogs.com/xiaoxiaossrs/p/8664214.html
• https://blog.csdn.net/weixin_37861326/article/details/80569226#
• https://segmentfault.com/a/1190000010144871