创建自己的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网站找到你刚上传的包了。
更新
以后,如果需要上传更新包的内容,流程是:
- 需要先更新版本号,
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/
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
参考
[完]
创建自己的library类库包并使用webpack4.x打包发布到npm的更多相关文章
- 使用NuGet发布自己的类库包(Library Package)
STEP 1:注册并获取API Key 首先,你需要到NuGet上注册一个新的账号,然后在My Account页面,获取一个API Key,这个过程很简单,我就不作说明了. STEP 2:下载NuGe ...
- 使用Nuget发布自己的类库包
NuGet是一个为大家所熟知的Visual Studio扩展,通过这个扩展,开发人员可以非常方便地在Visual Studio中安装或更新项目中所需要的第三方组件,同时也可以通过NuGet来安装一些V ...
- 发布自己的类库包到Nuget
今天来记录下发布自己的类库到Nuget. 一.准备工作 注册www.nuget.org,获取APIKey 后面发布要使用到. 二.创建项目 新建类库项目 新建测试demo类 public class ...
- 如何开发一个npm包并发布到npm中央仓库
转自: https://liaolongdong.com/2019/01/24/publish-public-npm.html 如何开发一个npm包并发布到npm中央仓库需求背景:平时在项目工作中可能 ...
- .NET Core +NuGet 创建打包发布自己的类库包
1. 创建类库项目 你可以使用现有的 .NET 类库项目用于要打包的代码,或者创建一个简单的项目,.NET CORE 2.1 项目的 类库如下所示: NugetDemo.class using Sys ...
- webpack创建library及从零开始发布一个npm包
最近公司有个需求,我们部门开发一个平台项目之后,其他兄弟部门开发出的插件我们可以拿来直接用,并且不需要我们再进行打包,只是做静态的文件引入,研究一波后发现,webpack创建library可以实现. ...
- [经验分享]NuGet发布自己的Dll(类库包)
什么是Nuget Nuget是一个.NET平台下的开源的项目,它是Visual Studio的扩展.在使用Visual Studio开发基于.NET Framework的应用时,Nuget能把在项目中 ...
- (转)-编写第一个ROS(创建工作空间workspace和功能包package)
原文网址:http://www.cnblogs.com/liuamin/p/5704281.html 刚接触ROS,学着写了第一个程序,怕以后忘记,就将其步骤记录下来.. 首先你必须保证你电脑已安装配 ...
- 创建可执行的JAR包
创建可执行的JAR文件包,需要使用带cvfm参数的jar命令,命令如下:JAR cvfm test.jar manifest.mf testtest.jar和manifest.mf为两个文件,分别对应 ...
随机推荐
- vscode常用插件
vscode写JS/html/css是比较适合的,因为轻量级. 只是需要一些插件来完善VSCODE功能,感觉VSCODE就是要靠插件的,不然的话,只是一个高级的代码编辑器.可能比editplus&qu ...
- 题解:[JSOI2004]平衡点 / 吊打XXX
这个题目算是一个模拟退火的板子题 物重一定,绳子越短,重物越低,势能越小,势能又与物重成正比 使得$\sum_{i=1}^nd[i]*w[i]$也就是总的重力势能最小,可以使得系统平衡 交了两面半.. ...
- How to Change Error Message Colors in Windows 10 PowerShell Console
While this was a really easy way to change some of the settings, what if you want to do more extensi ...
- 小白月赛13 小A的路径 (矩阵快速幂求距离为k的路径数)
链接:https://ac.nowcoder.com/acm/contest/549/E来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言52428 ...
- (八) Usb摄像头描述符解析
目录 Usb摄像头描述符解析 总结 参考资料 打印设备描述符 打印配置描述符 打印接口联合体描述符 打印接口描述符 打印当前设置的额外描述符 代码解析额外的描述符 打印端点描述符 title: Usb ...
- 2019全国大学生信息安全竞赛部分Web writeup
JustSoso 0x01 审查元素发现了提示,伪协议拿源码 /index.php?file=php://filter/read=convert.base64-encode/resource=inde ...
- C# bool.tryparse
才工作时候是做C++的,受这个影响一直以为C# 转换 “0” 和 "false"会转换为 false,“1”和"true"转换为true,原来只有“true”才 ...
- [算法竞赛入门经典]Ancient Cipher, NEERC 2004,UVa1339
Description Ancient Roman empire had a strong government system with various departments, including ...
- Exp3 免杀原理与实践 20164314 郭浏聿
一.实践内容 1.正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil-evasion,加壳工具,使用shellcode编程 2.通过组合应用各种技术实现恶意代码免杀(0.5分) ...
- mysql 1194 – Table ‘tbl_video_info’ is marked as crashed and should be repaired 解决方法
执行REPAIR TABLE `tbl_vedio_info`; 然后就可以了