一、目的

主要是纪录和回顾自己开发的一些步骤以及遇到的一些问题和解决方案

二、准备工作

1、IDE 选择 VS Code

2、安装node 环境 (https://nodejs.org/zh-cn/

3、git仓库  gitlab (https://gitlab.com)

  (1)  注册

(2)add ssh key(可以看一下 https://gitlab.com/help/ssh/README.md)

(3)新建project

  (4)git clone 到本地

  (5)  工程下执行

    npm init

4、npm

  (1)注册新用户 (https://www.npmjs.com)

  (2)本地添加用户 工程下执行 (文档:https://docs.npmjs.com/misc/developers

      npm adduser

三、开发

1、在根目录下 新建 index.js 文件 用于功能入口文件

2、新建一个module目录用于存放模块文件

四、编译

1、安装bebel-cli 进行编译

npm i babel-cli -d

babel index.js  module/* module/**/* -d dist -s inline

  

2、安装 webpack 打包

npm i webpack-cli -d

  

3、编辑webpack.config.js (dev环境 足够简单 没必要加些多余的插件 且 vscode 已经加了eslint 语法检测 关于配置可以参考文档)

let path = require('path')

module.exports = {
entry:path.resolve(__dirname,'./index.js'),//入口文件
output:{
path:path.resolve(__dirname,'./dist'),//输出路径
filename:'index.js',//输出文件名
library: 'kdUploader',//库名
libraryTarget:'umd'//可以参考 导出库(exported library)的类型
 },
mode:'development',//定义开发环境
module:{
rules:[
{ test:/\.js(x)?$/, exclude: /node_modules/, use:['babel-loader'] }//对js或jsx文件用babel-loader编译
] }
}

4、在package.json 文件中scripts 下加入build命令

"build": "webpack --config webpack.config.js -w"

5、执行命令

npm run build

  

五、调试

1、下载Debugger for Chrome 扩展 (由于我开发的npm包是用于前端的)

2、调试node包  在下图文件中添加

{
"type": "node",
"request": "launch",
"name": "启动程序",
"program": "${workspaceFolder}/dist/index.js"//功能入口文件
}

3、调试前端引入组件 在下图文件中添加

{
"name": "Launch index.html",
"type": "chrome",
"request": "launch",
"file": "${workspaceFolder}/test/index.html"//测试起始html文件路径
}

六、提交代码及发布

1、提交代码

git add -A
git commit -m 'message'
git push -u origin master

2、发布

npm version $VERSION --message "message"//$VERSION 为发布版本号
npm publish

  

 

从零系列--开发npm包(一)的更多相关文章

  1. 从零系列--开发npm包(二)

    一.利用shell简化组合命令 set -e CVERSION=$(git tag | ) echo "current version:$CVERSION" echo " ...

  2. node.js开发 npm包管理工具 npm 和 cnpm区别

    npm 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用. 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用 np ...

  3. 如何开发NPM包

    创建包目录 D:\>mkdir mypackage && cd mypackage D:\mypackage>npm init --yes 进入mypackage目录,你会 ...

  4. node.js开发 npm包管理工具

    npm介绍 说明:npm(node package manager)是nodejs的包管理器,用于node插件管理(包括安装.卸载.管理依赖等) 使用npm安装插件:命令提示符执行npm instal ...

  5. 记npm包开发全过程

    概述 为什么开发npm包? 如何开发? 如何写单元测试? package.json 如何发布模块? 如何使用? 为什么开发npm模块? NPM的全称是Node Package Manager,是一个N ...

  6. 【vue系列之三】从一个vue-pdf-shower,说说vue组件和npm包

    前言 从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一 ...

  7. 在2018年如何优雅的开发一个typescript语言的npm包?

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由小明plus发表 很多时候,我们可能想要用 typescript 语言来创建一些模块,并提交到 npm 供别人使用, 那么在 2018 ...

  8. 如何开发一个npm包并发布

    一.安装nodejs 不多说了,网上教程多得是 二.创建自己的npm包 目录结构 npm-test a.js b.js package.json 开发 为了简单便于理解,就开发一个简单地hello程序 ...

  9. npm包开发与发布

    把通用的功能开发成npm包,便用使用和维护,更重要的是可以分享给广大的开发者,是不是很激动人心! 那么,步骤如下: 1.创建项目 创建项目目录,npm init ,根据需要输入配置信息(建完后也可以在 ...

随机推荐

  1. 折射向量计算(Refraction Vector Calculation)

    上个月学习Peter Shirley-Ray Tracing in One Weekend的系列三本书,收获真的很多.这个系列的书真的是手把手教你如何从零开始构建一个光线跟踪渲染器,对新手(像我)非常 ...

  2. Tarjan-割点&桥&双连通

    $Tarjan$求割点 感觉图论是个好神奇的东西啊,有各种奇奇怪怪的算法,而且非常巧妙. 周末之前说好回来之后进行一下学术交流,于是wzx就教了$Tarjan$,在这里我一定要说: wzx  AK   ...

  3. BZOJ4184:shallot(线段树分治,线性基)

    Description 小苗去市场上买了一捆小葱苗,她突然一时兴起,于是她在每颗小葱苗上写上一个数字,然后把小葱叫过来玩游戏. 每个时刻她会给小葱一颗小葱苗或者是从小葱手里拿走一颗小葱苗,并且 让小葱 ...

  4. BZOJ3673/3674:可持久化并查集

    Description n个集合 m个操作 操作: 1 a b 合并a,b所在集合 2 k 回到第k次操作之后的状态(查询算作操作) 3 a b 询问a,b是否属于同一集合,是则输出1否则输出0 0& ...

  5. Lr场景设计-hc课堂笔记

    性能测试最基本也是最难的部分:场景设计.瓶颈分析和定位 10个业务10个脚本,每个脚本单独执行:单独场景.10个脚本一起执行:混合场景.10个业务1个脚本:可以设计不同用户登录,分别做不同的操作等场景 ...

  6. mysql 压缩备份 压缩还原 命令

    .mysqldump 备份并压缩sql文件 mysql>mysqldump -h主机ip -u用户名 -p密码(也可不输入) 数据库名 | gzip > 压缩后文件位置 .mysql直接用 ...

  7. day42

    今日内容: 1.子查询补充 2.正则表达式 3.pymysql 1.子查询补充 什么是子查询? 将上一次查询的结果作为下一次查询的条件或原数据 又称为内查询 作用:当你的需求,一次查询无法满足的时候( ...

  8. frameset的各个frame之间互相访问的方法

    工作中很少使用到frameset,对其了解也是十分有限,这里在网上找了点资料,摘抄了部分内容. (1)获得html页面上的frame window.frames可以获得本页面上所有frame集合,用法 ...

  9. vue 打包后,后缀名为.woff等字体问题不能用解决办法

    1.打开 build / webpack.prod.conf.js ,找到 module: { rules: utils.styleLoaders({ sourceMap: config.build. ...

  10. Asp.Net StateServer实现共同域名下Session共享

    概述 在实验的时候,参照了多方的信息,确实成功了,这里简单记录一下. 我们知道,在Asp.Net的Web.Config文件中,System.Web节点下,有个sessionState节点,它说明了应用 ...