一、目的

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

二、准备工作

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. 【转】HTTP学习---图解HTTP[三次握手&&ISO模型]

    [转]https://www.toutiao.com/i6592556686068679182/ 首先了解一次完整的HTTP请求到响应的过程需要的步骤: 1. 域名解析 2. 发起TCP的3次握手 3 ...

  2. 2.1Python基础语法(一)之注释与数据类型:

    返回总目录 目录: 1.注释 2.乱码 3.变量 4.数据类型 5.数据的转换 6.动态,静态和强类型,弱类型 (一)注释:(编译时是被编译器忽略的) 1.注释的分类: 2.特殊注释: (二)乱码:( ...

  3. SmartUpload相关类的说明

    ㈠ File类 这个类包装了一个上传文件的所有信息.通过它,可以得到上传文件的文件名.文件大小.扩展名.文件数据等信息. File类主要提供以下方法: 1.saveAs作用:将文件换名另存. 原型: ...

  4. 2.python数据结构的性能分析

    一.引言 - 现在大家对 大O 算法和不同函数之间的差异有了了解.本节的目标是告诉你 Python 列表和字典操作的 大O 性能.然后我们将做一些基于时间的实验来说明每个数据结构的花销和使用这些数据结 ...

  5. JavaSript模块规范 - AMD规范与CMD规范介绍[转]

    原文地址:http://blog.chinaunix.net/uid-26672038-id-4112229.html JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什 ...

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

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

  7. 根据Uri获取文件的绝对路径

    简易版处理(实际并没发现有什么问题) public static String getRealPathFromURI(Context context, Uri contentURI) { String ...

  8. switchable图片切换

    前提: 最近由于项目的需要jquery "switchable图片切换"效果 所以趁着周末有空时间研究下 ,以前工作都依赖于kissy框架,所以也没有综合的写过类似的,如下图所示效 ...

  9. (二) DRF 视图

    DRF中的Request 在Django REST Framework中内置的Request类扩展了Django中的Request类,实现了很多方便的功能--如请求数据解析和认证等. 比如,区别于Dj ...

  10. php 操作时间、日期类函数

    <?php // time() echo "time(): ",time(); echo "\n"; // strtotime() echo " ...