创建自己的library类库包并使用webpack4.x打包发布到npm

我们在开发过程中,可能经常要使用第三方类库,比如jquerylodash等。我们通过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账号,并验证邮箱。

然后在终端使用命令npm login,输入注册时候的账户、密码、邮箱,来登陆。(也可以直接使用命令npm adduser来注册并登陆。)

上传

前期工作做好,确定自己的类库可以发布之后,使用npm publish来发布上传包。成功之后,就可以在npmjs网站找到你刚上传的包了。

更新

以后,如果需要上传更新包的内容,流程是

  1. 需要先更新版本号,

npm version <update_type>

  1. 之后webpack构建

npm run build

  1. 上传

npm publish

需要更新版本编号,可以直接手动在package.json中更改version字段。当然,也可以使用命令

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

此命令,会在git commit中生成一条记录,并标记tag

解释下以下三种:patchminormajor

目前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. 包重名的问题。 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。

请查看源码
NPM发布的包

参考

  1. webpack配置:https://www.cnblogs.com/weiqinl/p/9773048.html
  2. npmjs.com
  3. babel
  4. webpack

[完]

原文地址:https://www.cnblogs.com/weiqinl/p/9786966.html

时间: 2024-10-13 06:03:12

创建自己的library类库包并使用webpack4.x打包发布到npm的相关文章

[转] 使用 NuGet 发布自己的类库包(Library Package)

NuGet是一个为大家所熟知的Visual Studio扩展,通过这个扩展,开发人员可以非常方便地在Visual Studio中安装或更新项目中所需要的第三方组件,同时也可以通过NuGet来安装一些Visual Studio的插件等.作为一名开发人员,您可能也会开发一些公共组件以供他人使用,本文将一步步介绍如何以最简单的方式将自己所开发的类库包发布到nuget上,以供更多的人使用. 背景 如果你还是不知道什么是NuGet,那么就看这样一个案例:我现在需要在我的项目中引用Castle.Core程序

使用NuGet发布自己的类库包(Library Package)

STEP 1:注册并获取API Key 首先,你需要到NuGet上注册一个新的账号,然后在My Account页面,获取一个API Key,这个过程很简单,我就不作说明了. STEP 2:下载NuGet.exe NuGet有个命令行工具:NuGet.exe;为了方便使用,请设置机器的PATH环境变量[exe所在目录],将NuGet.exe的路径添加到PATH中. 在http://nuget.codeplex.com/releases页面底部找到NuGet.exe,点击下载即可 STEP 3:设置

【.NET】NuGet发布类库包,轻松管理dll文件

大中型项目中总是有专门人员去开发和维护底层类库的,封装自己的类库不仅可以提高代码的复用度,减少开发量,使代码更简洁,还可以提高运行速度.但是,类库方法的增加与修改导致使用该类库的系统开发人员频繁地删除和添加引用.如果底层dll文件过多,任何一次变动都将导致高错误率的修改!!为了方便管理dll文件,我们使用NuGet动态更新的方式. 如果您是类库的开发者与维护者,请阅读发布篇.如果您是基于类库的开发者,请阅读使用篇. 发布篇: (假设此时您已经开发好了一个类库.) 1.下载NuGet.exe,并将

编写第一个ROS(创建工作空间workspace和功能包package)

刚接触ROS,学着写了第一个程序,怕以后忘记,就将其步骤记录下来.. 首先你必须保证你电脑已安装配置好ROS. 1.创建工作空间(workspace) 我们所创建功能包package,应该全部放到一个叫做工作空间(workspace)的目录中 .你可以把目录存储在你账号的任何位置例如,我所创建的工作空间的是路径/home,同时你可以用任何你喜欢的名字命名你的工作空间,我的工作空间名为 test,现在请使用标准的mkdir命令行去创建一个工作空间.我首先建立一个工作空间,名字为test, 此处创建

NuGet——发布自己的类库包

简单介绍: NuGet是.Net平台下的一个开源项目,它是VS的一个扩展,在使用VS开发基于.NET  Framework的应用时,NuGet能够把项目中添加,删除,更新引用的工作变得更加快捷方便.简单点,NuGet就是可以把DLL文件/文件添加到项目中,进而省略了繁琐而古老的拷贝方式. 学习背景: 刚接手系统的时候,是因为自己对于需求特别的了解,但是由于之前的种种原因,自己对于这短时间学习的了解的新知识是一无所知啊!所以当时接手的第一感觉就是学生端--我该如何调用其他的接口呢?如果拷贝/调用-

Android support library支持包常用控件介绍(二)

谷歌官方推出Material Design 设计理念已经有段时间了,为支持更方便的实现 Material Design设计效果,官方给出了Android support design library 支持库,让开发者更容易的实现材料设计的效果.顺便推荐官方的一个图标库:Material Icons 控件名称 NavigationView FloatingActionButton TextInputLayout Snackbar TabLayout AppBarLayout Coordinator

.net利用nuget管理类库包——各系统交互

高校云平台,开发过程中,每个团队开发一个子系统.每个子系统内部又分别开个各子模块. 对于整个平台来说,各自的开发不影响其他人的开发.即面向接口的编程. 那么对于各个模块来说,又是如何统一调用其他模块的接口的呢? 在开发过程中,接口的开发与使用 肯定是不定时更新的.那么整个平台就肯定使用一个工具来统一管理 各个模块的接口. 使用nuget进行管理各个模块的类库.每个发布一个自己的接口.如果调用其他的系统,则进行引用. 例如,考试系统的数据,大都来自与基础系统.所以需要引用平台下,基础系统的dll文

thinkPHP5 类库包注册

tp5的类库包注册分为自动注册和手动注册 自动注册 我们只需要把自己的类库包目录放入EXTEND_PATH目录(默认为extend,可配置),就可以自动注册对应的命名空间,例如: 我们在extend目录下面新增一个my目录,然后定义一个\my\Test类( 类文件位于extend/my/Test.php)如下: namespace my; class Test { public function sayHello() { echo 'hello'; } } 我们就可以直接实例化和调用: $Tes

SSIS从理论到实战,再到应用(1)----创建自己的第一个包

原文:SSIS从理论到实战,再到应用(1)----创建自己的第一个包 其实,如果你使用sql2008的导出导入工具的时候,你就已经在使用包了. 目标:使用sql2008 导入导出工具,导入excel数据,并得到一个package,然后查看package的设置 ====>最后得到SSIS包 我们梳理一下,我们的目标是什么:将excel的数据导入到了数据库中,那必然有这几个动作 1.创建表 2.将数据导入到我们创建的表中 Ok,这样我来将这个包打开来看看是否有至少两个动作 首先,我们新建一个SSIS