我们在开发过程中, 可能经常要使用第三方类库, 比如 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: 'webpack-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 文件夹, 并出现了一个 webpack-number-Word.JS 文件.
我以上的介绍的都是些简单的使用. webpack 还有很多可以优化的内容, 以后继续探讨.
至此, 我们自己的类库包 webpack-number-Word 已经出来了, 接下来就是要上传至 NPM 了.
3. 上传至 NPM
你可以上传任何具有 package.JSON 文件的文件夹至 NPM. 几个主要命令:
- NPM adduser
- NPM login
- NPM version <update_type>
- NPM publish
上传之前, 需要登陆.
如果没有账号, 需要先注册 NPM 账号 https://www.npmjs.com/signup , 并验证邮箱.
然后在终端使用命令 NPM login, 输入注册时候的账户, 密码, 邮箱, 来登陆.(也可以直接使用命令 NPM adduser 来注册并登陆.)
上传
前期工作做好, 确定自己的类库可以发布之后, 使用 NPM publish 来发布上传包. 成功之后, 就可以在 npmjs 网站 https://www.npmjs.com/ 找到你刚上传的包了.
更新
以后, 如果需要上传更新包的内容, 流程是
需要先更新版本号,
NPM version <update_type>
之后 webpack 构建
NPM run build
上传
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
上传发布的时候可能出现的问题:
权限问题. 需要使用正确的账户, 密码, 邮箱登录.
权限问题. cnpm 淘宝镜像不能发布 NPM 包. 所以, 需要更改镜像地址, NPM config set registry https://www.npmjs.com/
包重名的问题. NPM 上的包, 不允许重名, 重版本号. 所以, 请先确认你将发布的包名字, 是否已经在 NPM 中存在.
4. 项目中使用
浏览器
1. 加载 Using Script Tag
- <script src="//unpkg.com/lodash">
- </script>
- <script src="//unpkg.com/webpack-number-word">
- </script>
2. 使用 Usage In Web
- numberWord.VERSION
- numberWord.numToWord(6)
- numberWord.wordToNum('five')
- NODE
1. 安装 Using NPM:
NPM install webpack-number-Word --save-dev
2. 使用 Usage In Node.JS
- require('lodash')
- var webpackNumber = require('webpack-number-word')
- webpackNumber.numToWord(1)
- webpackNumber.wordToNum('two')
至此, 创建, 打包, 发布, 使用, 都有了. 如果还想继续深入完善, 需要考虑代码测试, 覆盖率测试, 还可以考虑自动化构建, 持续集成 CI.
请查看源码 https://github.com/weiqinl/webpack-library-example
NPM 发布的包 https://www.npmjs.com/package/webpack-number-word
参考
webpack 配置: https://www.cnblogs.com/weiqinl/p/9773048.html
- https://babeljs.io/
- https://webpack.js.org/
[完]
来源: https://www.cnblogs.com/weiqinl/p/9786966.html