構建前端npm包

參考文章

構建前端npm庫開發框架

看完整篇文章之後，我們會發現整個腳手架，最關鍵的莫過於webpack的配置文件，我們爲每個模塊配置loader，入口、出口。然後通過package.json的script，來配置執行不同webpack配置項的腳本，將結果輸出到指定的目錄。

說白了，自己構建一個腳手架的、或者npm開發包的流程，就是配置webpack的流程。

這就解決了共用一個node_modules等等問題。

本文比較有價值的內容還有npm倉庫的文件夾配置。

先來看一條打包的命令

  "build:vui": "webpack --progress --hide-modules --config build/webpack.build.js && rimraf examples/dist && cross-env NODE_ENV=production webpack --progress --hide-modules --config build/webpack.build.min.js"

基礎知識準備

名詞解釋

---

cross-env NODE_ENV=production

簡單來說，就是windows不支持NODE_ENV=development的設置方式。

但是，又不想放棄這樣簡單方便的方式，於是只好求助於Google了。

解決方式
功夫不負有心人，在萬能的google上，我找到了解決方法：cross-env。
這個迷你的包能夠提供一個設置環境變量的scripts，讓你能夠以unix方式設置環境變量，然後在windows上也能兼容運行。

使用方法：
安裝cross-env:npm install cross-env –save-dev

在NODE_ENV=xxxxxxx前面添加cross-env就可以了。

webpack –progress –hide-modules –config

–progress： 打印出編譯進度的百分比值

–hide-modules： 隱藏關於模塊的信息

–config ： 使用配置文件

---

rimraf examples/dist

級聯刪除整個文件夾

---

__dirname：    獲得當前執行文件所在目錄的完整目錄名
__filename：   獲得當前執行文件的帶有完整絕對路徑的文件名
process.cwd()：獲得當前執行node命令時候的文件夾目錄名 
./：           文件所在目錄

1、改造目錄結構

1.1. 增加src目錄

說明：src目錄主要用來存放組件註冊的主入口，工具方法等

1.2. 增加lib目錄

說明：lib目錄主要用來存放打包後的源碼

1.3. 增加example目錄

說明：用於存放開發的demo代碼

1.4. package目錄：用來存放源代碼

在package/index.js引入所有包，並且導出

代碼示例如下：

import {tools3D} from "./lib/cwComponents/3d_factory";
import {cwEventBus} from "./lib/cwComponents/eventBus/eventBus";
export {tools3D,cwEventBus};

entry: {
  'vendor': ['vue', 'vue-router'],
  'vui': './examples/src/index.js'
},
// ...
plugins: [
  // ...
  // 將入口改成examples/src/index.tpl
  new HtmlWebpackPlugin({
    chunks: ['vendor', 'vui'],
    template: 'examples/src/index.tpl',
    filename: 'index.html',
    inject: true
  })
]

2.改造build文件

可以打包到lib目錄下。

入口文件：

/**
 * Created by Administrator on 2017/4/21 0021.
 */

/**
* 文件名：3d_factory
* 功能：三維引擎與vue controller的中間層，
* 用於方便三維引擎的切換
* */
//初始化三維場景


import {tools3D} from "../lib/cwComponents/3d_factory";
import {cwEventBus} from "../lib/cwComponents/eventBus/eventBus";
window.tools3D = tools3D;
window.cwEventBus = cwEventBus;

配置打包的webpack配置文件：

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: './demo/index.js',  //打包的時候，就把對象掛載到了window對象下面
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './demo/dist'),
        publicPath : './demo/dist/'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use:[
                    "babel-loader"
                ]
            }
        ]
    }
};

3.開始構造npm包

3.1. 註冊npm賬號

npm install -g nrm 

nrm add ascs http://192.168.2.25:4875

npm init
# package name: (qiangdada520-npm-test)
# version: (1.0.0)
# description: npm test
# entry point: (index.js) index.js
# test command:
# git repository:
# keywords: npm test
# author: qiangdada
# license: (ISC)

3.2. 連接npm倉庫
有些代碼我們不希望放在公網上讓別人下載，那麼可以自己搭建私有npm服務器。私有的npm服務器既可以存放自己的包，如果本地服務器中沒有這個包，它會去配置中指定的倉庫地址拉取到本地，十分的方便。
可以參考我的另一篇文章。

npm set registry http://192.168.2.25:4875
npm adduser --registry http://192.168.2.25:4875

或者：

nrm use ascs

npm adduser
# Username: 填寫你自己的npm賬號
# Password: npm賬號密碼
# Email: (this IS public) 你npm賬號的認證郵箱
# Logged in as xuqiang521 on https://registry.npmjs.org/.  連接成功

3.3. 發佈組件庫

3.3.1. 可以在package文件夾下簡單的寫點內容
3.3.2. 配置npm script ，讓package打包輸出壓縮後的文件到lib
3.3.3. 在lib目錄下使用npm init,創建包的描述文件,這裏最關鍵的是注意main的入口文件

{
  "name": "@cityworks/rocket-ui",
  "version": "1.0.0",
  "description": "cityworks 前端組件庫",
  "main": "rocketUi.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // npm 發佈出去的包包含的文件
  "files": [
    "lib",
    "src",
    "packages" //如果你不想把源碼放出去，可以不包含這個目錄，因爲lib下面已經包含了打包後的代碼
  ],
  "keywords": [
    "UI"
  ],
  "author": "[email protected]",
  "license": "MIT"
}

4.測試包是否能夠使用

到某個項目下，npm install 包名，引用試試，成功就成功咯！