在項目中引入本地自己創建的包（在模塊化項目中使用 jtopo）

如何在項目中引入本地自己創建的包

昨天有位羣友問我怎麼在項目中通過 npm install 命令安裝 jtopo？據我所知，jtopo 並沒有提供 npm 包可下載，於是就有了這個記錄~~~

PS：第二天，在 npm 上發佈了一個包（jtopo-in-node 傳送門），用於在模塊化項目中使用 jtopo；有優化建議的小夥伴兒可以在使用 demo 項目中提 Issues 聯繫我（或者通過交流羣聯繫我），對包進行優化哦。

記錄一個完整的過程：從零開始寫一個簡單的包，然後在項目中引用。

本文是 npm 學習筆記 的節選，對 npm 有興趣的話可移步一觀。

創建一個簡單的包

首先，新建一個文件夾 npm-demo，在文件夾中新建文件 index.js，並寫入下面內容：

;(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
      typeof define === 'function' && define.amd ? define(factory) :
        global.moduleName = factory()
  }(this, (function () {
    var demo = {
      sayHi: function () {
        console.log('hi，module !');
      }
    };
   
    return demo
})))

這個簡單的文件就當作是我們打包好的文件吧~

接着繼續在文件夾中新建文件 readme.md ，並寫入：

# 說明

用於測試在項目中引入本地自己創建的包

在命令行 CD 進文件夾 npm-demo，並運行命令 npm init -y：

PS F:\demo\npm-demo> npm init -y
Wrote to F:\demo\npm-demo\package.json:

{
  "name": "npm-demo",
  "version": "1.0.0",
  "description": "用於測試在項目中引入本地自己創建的包",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

跳過問卷，直接根據目錄信息創建一個默認的 package.json 文件，只需要在 npm-demo 目錄運行命令 npm init --yes 就可以了。（可簡寫爲 npm init -y ）。

這樣我們一個本地的包就創建完成啦。

在前端項目中引入本地自己寫的包

首先在前端根目錄下新建文件夾 local-modules（用來保存沒有發佈出去的包，執行安裝命令時，從這個目錄讀取本地自己寫的包），然後把上一步創建的一個簡單的包複製進文件夾。

然後 CD 到前端項目，並運行命令 npm install --save ./local-modules/npm-demo：

PS F:\demo\webpack_demo\webpack-es6> npm install --save ./local-modules/npm-demo
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
added 1 package and audited 5661 packages in 9.46s
found 0 vulnerabilities

檢查前端項目 package.json 文件中的 "dependencies" 字段，是否含有：

"npm-demo": "file:local-modules/npm-demo" // 來源在本地，而非線上的包。所以不像其它包那樣是版本號

如果有就說明引入成功，在前端項目的 node_modules 文件夾可以找到 npm-demo 包。

接下來就可以在前端項目中，像使用其它包一樣愉快的使用這個包啦~~~

在頁面中使用自己的包

在頁面引入：

import test from "npm-demo"

test.sayHi()
console.log("npm-demo",test)

var myComponent = () => {
    let item = document.createElement("div");
    item.innerHTML = "<p>hello，二狗子！</p>"
    console.log(item)
  return item;
};

document.body.appendChild(myComponent());

運行項目，在頁面控制檯就能看到打印出來的內容：

hi，module !
npm-demo {sayHi: ƒ}
component <div>​…​</div>​