(二)像NPM上发布一个自己的安装包怎么样?
时间:2020-04-22
本文章向大家介绍(二)像NPM上发布一个自己的安装包怎么样?,主要包括(二)像NPM上发布一个自己的安装包怎么样?使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
首先,注册一个npm(https://www.npmjs.com/)账号,记得验证邮箱,这一步跳过
第二步,阅读webpack官方文档创建libary一节,(https://www.webpackjs.com/guides/author-libraries/),我们把上一节的demo根据官方示例进行改造
第三步,修改构建文件build/build.js
const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin'); const htmlWebpackPluginTemplateContent = ` <html> <body> <h1>wf-first-vue.js</h1> <span id="app"></span> <script> console.log(WfVue) </script> </body> </html> ` module.exports = { mode: 'production', entry: { app: './src/index.js' }, plugins: [], output: { filename: 'wf-first-vue.js', path: path.resolve(__dirname, '../dist'), library: 'wf_vue', libraryTarget: 'umd' }, externals: { lodash: { commonjs: 'lodash', commonjs2: 'lodash', amd: 'lodash', root: '_' } }, /*plugins: [new HtmlWebpackPlugin({ templateContent: htmlWebpackPluginTemplateContent })],*/ module: { /*rules: [ { test: /\.js$/, use: 'babel-loader' } ]*/ }, devServer: { contentBase: './dist', hot: true } }
修改入口文件src/index.js
import _ from 'lodash' const numRef = [{ "num": 1, "word": "One" }, { "num": 2, "word": "Two" }, { "num": 3, "word": "Three" }, { "num": 4, "word": "Four" }, { "num": 5, "word": "Five" }, { "num": 0, "word": "Zero" }] export function numToWord(num) { return _.reduce(numRef, (accum, ref) => { return ref.num === num ? ref.word : accum; }, ''); }; export function wordToNum(word) { return _.reduce(numRef, (accum, ref) => { return ref.word === word && word.toLowerCase() ? ref.num : accum; }, -1); };
修改package.json的入口文件main
第三步,执行npm run build,进行打包,
然后执行 npm login 登陆
最后执行npm publish发布,到这里我们的安装包就已经发不好了
看一下效果:
最后我们测试一下我们的安装包,
1,将我们的打包结果直接在HTML中引入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://unpkg.com/lodash"></script> <script src="../dist/wf-first-vue.js"></script> </head> <body> <script> console.log(wf_vue) console.log(wf_vue.numToWord(2)) console.log(wf_vue.wordToNum('three')) </script> </body> </html>
结果:正常
通过es和commonjs方式
import * as wf_vue from 'wf-first-vue'
const wf = require('wf-first-vue')
console.log('wf-vue', wf_vue.numToWord(3), wf.numToWord(2))
正常
原文地址:https://www.cnblogs.com/weiziyu/p/12753536.html
- E路阳光
- 解决微信公众平台IP白名单
- 基于Cef内核的多店铺登录器(含源码)
- Android解析ClassLoader(二)Android中的ClassLoader
- 近期开发中遇到的问题总结
- Apache Spark中的决策树
- 数据结构是哈希表(hashTable)
- 【翻译】在Visual Studio中使用Asp.Net Core MVC创建你的第一个Web API应用(一)
- 基于JQuery EasyUI的WebMVC控件封装(含源码)
- Android系统源码分析-JNI
- EntityFrameWork实现部分字段获取和修改(含源码)
- 基于Ado.Net的日志组件
- Do you kown Asp.Net Core -- 配置Kestrel端口
- 【翻译】在Visual Studio中使用Asp.Net Core MVC创建第一个Web Api应用(二)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- SAP CRM订单状态管理的一些重要的数据库表
- Angular应用的依赖注入调试
- 给Angular应用增添搜索Search功能
- Angular应用一个创建场景的问题分析
- WPF 最简逻辑实现多指顺滑的笔迹书写
- WPF 如何确定应用程序开启了 Pointer 触摸消息的支持
- Hexo-Matery主题美化
- uniapp onPullDownRefresh 下拉刷新小坑
- Windows服务器常用配置
- SAP CRM订单数据库表CRMD_SHIPPING的填充原理
- 使用art-template模板引擎渲染数据
- SAP CRM索引数据库表CRMD_ORDER_INDEX的更新原理
- 将自己的nodeJS项目分享到npm上
- react中使用prop-types检测props数据类型
- git的常用命令及工作中冲突问题解决方法