建立本身的library类库包并使用webpack4.x打包发布到npm

时间 2019-11-14

标签建立本身 library 并使 webpack4.x webpack 打包发布 npm 繁體版

原文原文链接

建立本身的library类库包并使用webpack4.x打包发布到npmhtml

咱们在开发过程当中，可能常常要使用第三方类库，好比jquery、lodash等。咱们经过npm，下载安装完以后，就能够使用了，简单方便。咱们本身能够建立一个类库，而后供其余人这样安装使用吗？固然是能够的。node

下面咱们就来讲说。jquery

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()

此类库有两个方法，数字和单词互转。webpack

这里能够直接使用lodash中的方法，是由于咱们在webpack配置中使用了webpack.ProvidePlugin插件，使其再被须要的时候才require进来.git

2. webpack4构建打包

使用babel编译js语法

安装babel环境github

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

建立文件.babelrc,设置转码的规则和插件web

{

  "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

npm i babel-loader -D

使用webpack打包

先安装webpack 和它的clijson

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网站找到你刚上传的包了。

更新

之后，若是须要上传更新包的内容，流程是：

须要先更新版本号，npm version <update_type>
以后webpack构建npm run build
上传npm publish

须要更新版本编号，能够直接手动在package.json中更改version字段。固然，也能够使用命令

此命令，会在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

上传发布的时候可能出现的问题：

权限问题。须要使用正确的帐户，密码，邮箱登陆。
权限问题。cnpm淘宝镜像不能发布npm包。因此，须要更改镜像地址，npm config set registry https://www.npmjs.com/
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

参考

[完]