一、目的

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

二、准备工作

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. length() 用法

    length:(字符串 | 列):求出字符串的长度: 求出bqh4表中zym列的长度. select * from bqh4select a.*,length(zym) from bqh4 a

  2. Linux命令网络命令之netstat

    Linux命令网络命令之netstat 这一年感觉到技术上成长到了一个瓶颈.可能是感觉自己学的东西足够应付目前的工作了,因此精神上就产生了懈怠,不思进取.到了一个技术氛围不错的公司,有许多专业能力很不 ...

  3. Mojave使用pyenv安装python-zlib错误

    mojave使用pyenv编译python出现 zipimport.ZipImportError: can't decompress data; zlib not available错误 解决方案: ...

  4. SP--report存储过程

    USE [edison_prc] GO SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO ),),),),),@day1 int,@day2 int) ...

  5. HTML5API之获取地理位置详解

    在使用地理位置API之前先来了解一下什么是经度和纬度以及地理位置获取的原理 首先经度指的是南北极的连接线,纬度指的是东西的连接线 地理位置的获取原理是通过IP地址(基于ISP记录,能够知道这个IP地址 ...

  6. C语言:值传递,地址传递和引用传递(example:值交换)

    于C语言中值传递.地址传递和引用传递的我个人理解. 通过一个例子:swap(交换两个整型变量的值)来表现! #include <stdio.h> void swap1(int* a,int ...

  7. python第三十五课——生成器

    1.生成器: 什么是生成器? 它内部封装了一套公式/算法,只有等到需要调用/执行数据时 --> next()函数执行 才会将公式计算得到数据结果,这就是生成器的原理(核心思想): [注意事项]: ...

  8. (排序算法整理)NEFU 30/32

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/caihongshijie6/article/details/26165093        事实上, ...

  9. Spring Boot 扩展点应用之工厂加载机制

    Spring 工厂加载机制,即 Spring Factories Loader,核心逻辑是使用 SpringFactoriesLoader 加载由用户实现的类,并配置在约定好的META-INF/spr ...

  10. 关于军训的模拟赛-R2

    终于我也参加了一场有R1 && R2的比赛呢. 点击此处查看R1 因为种种原因,老师认为上次的考试没有体现我们的真实水平,于是举办了毒瘤R2,其实也不是非常毒瘤,还是一贯的风格. T1 ...