一、目的

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

二、准备工作

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. kubeadm快速部署Kubernetes单节点

    1. 安装要求 在开始之前,部署Kubernetes集群机器需要满足以下几个条件: 一台或多台机器,操作系统 CentOS7.x-86_x64 硬件配置:2GB或更多RAM,2个CPU或更多CPU,硬 ...

  2. 团队-UML

    UML设计 分工 刘双玉 李佳铭 杜宏庆 肖小强 汪志彬 江郑 符天愉 邓弘立 后台数据库 求购模块 浏览检索商品 即时聊天系统 商品管理 管理员系统 后台商品发布收藏系统 登录注册与个人信息系统 U ...

  3. Beta 冲刺 (7/7)

    Beta 冲刺 (7/7) 队名:洛基小队 峻雄(组长) 已完成:人物释放技能部分的实现 后两天计划:整合脚本,测试内容 剩余任务:整合各部分脚本 困难:尽快完善整合出β版的内容 非易 已完成:商店功 ...

  4. 如何永久激活(破解) IntelliJ IDEA 2018.1.3

    版权声明:本文为博主原创文章,转载不需要博主同意,只需贴上原文链接即可. https://blog.csdn.net/zhige_me/article/details/80369336 1.去官网下载 ...

  5. Tensorflow Object Detection API 安装

    git:https://github.com/tensorflow/models/tree/master/object_detection 中文文档:http://wiki.jikexueyuan.c ...

  6. Linux下jdk&tomcat的安装

    unbantu: 1.下载相应版本的jdk及tomcat:sudo wget ${url} 2.解压: tar zxvf jdk-7u79-linux-x64.tar.gz​ tar zxvf apa ...

  7. Python2.7-copy_reg

    copy_reg 模块,提供了在 pickle 或是 copy 特定对象时,可以运行一个指定的函数,作为对象的构造器 模块方法: copy_reg.constructor(object):声明一个可调 ...

  8. JAVA框架:hibernate(二)

    一.事务操作. 代码: @Test public void tr_Up(){ Session session=hibernateUtils.getSession(); Transaction tran ...

  9. Android 使用正则表达式验证身份证号是否符合规则

    我国当前的身份证号分为三种: 一.15位身份证号 二.18位身份证号(前17位位数字,最后一位为字母x) 三.18为身份证号(18位都是数字) 具体验证请参考下面代码: /** * 验证身份证号是否符 ...

  10. Vim2.1-Vim简明教程【CoolShell】【非原创】

    vim的学习曲线相当的大(参看各种文本编辑器的学习曲线),所以,如果你一开始看到的是一大堆VIM的命令分类,你一定会对这个编辑器失去兴趣的.下面的文章翻译自<Learn Vim Progress ...