创建本身的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