建立本身的library類庫包並使用webpack4.x打包發佈到npm

建立本身的library類庫包並使用webpack4.x打包發佈到npm

咱們在開發過程當中，可能常常要使用第三方類庫，好比jquery、lodash等。咱們經過npm，下載安裝完以後，就能夠使用了，簡單方便。咱們本身能夠建立一個類庫，而後供其餘人這樣安裝使用嗎？固然是能夠的。

下面咱們就來講說。

1. 建立本身的類庫

index.js

import numRef from './ref.json' // 此文件請查看源碼

const numberWord = () => {

  const numToWord = (num) => {

    let returnValue = _.reduce(numRef, (accum, ref) => {

      return ref.num === num ? ref.word : accum

    }, '')

    return returnValue === '' ? '請輸入0-10中的某個整數' : returnValue

  }

  const wordToNum = (word) => {

    let resultValue = _.reduce(numRef, (accum, ref) => {

      return ref.word === word || word.toLowerCase() === ref.word.toLowerCase() ? ref.num : accum

    }, -1)

    return resultValue === -1 ? '請輸入0-10中正確的單詞...' : resultValue

  }

  return {
    numToWord,
    wordToNum
  }

}

export default numberWord()

此類庫有兩個方法，數字和單詞互轉。

這裏能夠直接使用lodash中的方法，是由於咱們在webpack配置中使用了webpack.ProvidePlugin插件，使其再被須要的時候才require進來.

2. webpack4構建打包

使用babel編譯js語法

安裝babel環境

npm i @babel/core @babel/preset-env @babel/polyfill @babel/plugin-transform-runtime -D

建立文件.babelrc,設置轉碼的規則和插件

{

  "presets": [

    ["@babel/preset-env", {

      "useBuiltIns": "usage",

      "modules": false

    }]

  ],

  "plugins": [

    [

      "@babel/plugin-transform-runtime", {

        "corejs": false,

        "helpers": false,

        "regenerator": false,

        "useESModules": false

      }

    ]

  ],

  "comments": false

}

增長webpack配置文件webpack.config.js:

let path = require('path')

let webpack = require('webpack')

module.exports = {

  entry: './src/index.js',

  output: {

    path: path.resolve(__dirname, 'dist'),

    filename: 'number-word.js', //打包以後生成的文件名，能夠隨意寫。

    library: 'numberWord', // 指定類庫名,主要用於直接引用的方式(好比使用script 標籤)

    libraryExport: "default", // 對外暴露default屬性，就能夠直接調用default裏的屬性

    globalObject: 'this', // 定義全局變量,兼容node和瀏覽器運行，避免出現"window is not defined"的狀況

    libraryTarget: 'umd' // 定義打包方式Universal Module Definition,同時支持在CommonJS、AMD和全局變量使用

  },

  mode: "production", // 告訴webpack使用production模式的內置優化,

  module: {

    rules: [{

      test: /\.js$/,

      include: [

        path.resolve(__dirname, 'src')

      ],

      exclude: /(node_modules|bower_components)/,

      loader: "babel-loader",

    }]

  },

  plugins: [

    new webpack.ProvidePlugin({ // ProvidePlugin 能夠將模塊做爲一個變量，被webpack在其餘每一個模塊中引用。只有你須要使用此變量的時候，這個模塊纔會被 require 進來。

      _: ['lodash']

    })

  ],

  externals: { // 從輸出的bundle中排除依賴

    lodash: { // 能夠在各模塊系統(Commonjs/Commonjs2/AMD)中經過'lodash'訪問，但在全局變量形式下用'_'訪問

      commonjs: 'lodash',

      commonjs2: 'lodash',

      amd: 'lodash',

      root: '_' // 指向全局變量

    }

  }

}

其中，使用了loader工具babel-loader，對src中的js文件加載

npm i babel-loader -D

使用webpack打包

先安裝webpack 和它的cli

npm i webpack webpack-cli -D

以後，執行命令，靜候佳況

npm run build

按以上流程，自動在根目錄下生成了dist文件夾，並出現了一個number-word.js文件。

我以上的介紹的都是些簡單的使用。webpack還有不少能夠優化的內容，之後繼續探討。

至此，咱們本身的類庫包webpack-library-example已經出來了，接下來就是要上傳至NPM了。

3. 上傳至NPM

你能夠上傳任何具備package.json文件的文件夾至NPM。幾個主要命令：

npm adduser

npm login

npm version <update_type>

npm publish

上傳以前，須要登錄。

若是沒有帳號，須要先註冊npm帳號，並驗證郵箱。

而後在終端使用命令npm login，輸入註冊時候的帳戶、密碼、郵箱，來登錄。（也能夠直接使用命令npm adduser來註冊並登錄。）

上傳

前期工做作好，肯定本身的類庫能夠發佈以後，使用npm publish來發布上傳包。成功以後，就能夠在npmjs網站找到你剛上傳的包了。

更新

之後，若是須要上傳更新包的內容，流程是：

1. 須要先更新版本號，npm version <update_type>
2. 以後webpack構建npm run build
3. 上傳npm publish

須要更新版本編號，能夠直接手動在package.json中更改version字段。固然，也能夠使用命令

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

此命令，會在git commit中生成一條記錄，並標記tag。

解釋下如下三種：patch、minor、major。

目前node版本大都是使用語義化版本(semver)做爲一個標準。

對於第一次發版"version": "1.0.0"，以後升級，使用對應的類型。

patch: 補丁發佈，向後兼容的bug修復，增長第三個數字。1.0.1

minor: 輕微發佈，向後兼容的新特性，將中間數字增長並將最後一位數重置爲0。1.1.0

major: 重大發布，破壞向下兼容的變化，將第一個數字增長，並將後兩位數重置爲0。2.0.0

上傳發布的時候可能出現的問題：

1. 權限問題。須要使用正確的帳戶，密碼，郵箱登陸。

2. 權限問題。cnpm淘寶鏡像不能發佈npm包。因此，須要更改鏡像地址，npm config set registry https://www.npmjs.com/

3. E403:包/版本重名的問題。 npm上的包，不容許重名，重版本號。因此，請先確認你將發佈的包名字，是否已經在npm中存在。

4. 項目中使用

瀏覽器

1. 加載 Using Script Tag

<script src="//unpkg.com/lodash"></script>

<script src="//unpkg.com/webpack-library-example"></script>

2. 使用 Usage In Web

numberWord.version

numberWord.numToWord(6)

numberWord.wordToNum('five')

NODE

1. 安裝 Using npm:

npm install webpack-library-example --save-dev

2. 使用 Usage In Node.js

require('lodash')

var webpackNumber = require('webpack-library-example')


webpackNumber.numToWord(1)

webpackNumber.wordToNum('two')

至此，建立，打包，發佈，使用，都有了。若是還想繼續深刻完善，須要考慮代碼測試，覆蓋率測試，還能夠考慮自動化構建，持續集成CI。

請查看源碼:https://github.com/weiqinl/webpack-library-example
NPM發佈的包:https://www.npmjs.com/package/webpack-library-example

參考

1. webpack配置:https://www.cnblogs.com/weiqinl/p/9773048.html

2. npmjs.com

3. babel

4. webpack

[完]