公布项目到NPM
修己安人,内圣外王
近期,在开发Node项目过程中遇到了须要类jQuery深拷贝对象的问题。去Github找了半天,并没有符合的,于是,自己决定写一个(mixin.js),然后推送到NPM(查看Npm相关内容。请查看<npm模块管理器>)。以下是整个流程,在此记录~~~
环境要求
- 安装Node
- 安装Npm
创建项目
第一步:在Github创建相关repository,然后进行npm init 初始化package.json。之前曾撰写过使用commander进行模拟npm init操作,请參考:使用Node.js构建命令行工具
第二步:编写相关代码
注意:对于引入方式进行处理
(function (global, name, factory) {
"use strict";
if (typeof exports === 'object' && typeof module !== 'undefined') {
module.exports = factory();
} else if (typeof define === 'function' && (define.amd || define.cmd)) {
define(factory);
} else {
global[name] = factory.apply(this);
}
}(this, "项目名称", function () {
// 逻辑编写
}));
第三步:公布模块
1. 在npm注冊账号:https://www.npmjs.com/signup
2. 在本地登录自己刚注冊的账号 npm login
3. 公布模块 npm publish
持续集成
眼下Github已经整合了持续集成服务travis,我们仅仅须要在项目中加入.travis.yml文件,在下一次push之后。travis就会定时执行npm test来測试你的项目(该项目中,使用mocha进行測试管理),而且会在測试失败的时候通知到你,你也能够把项目当前的状态显示在README.md中,进而非常easy知道项目当前状态。
language: node_js
node_js:
- "4"
压缩打包
项目中,使用gulp进行压缩代码
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
gulp.task('default', function () {
gulp.src('src/*.js')
.pipe(uglify())
.pipe(rename({ extname: '.min.js' }))
.pipe(gulp.dest('dist/'))
});
附:
项目结构
mixin.js
├─┬ dist
│ └── mixin.min.js
├─┬ src
│ └── mixin.js
├─┬ test
│ └── test.js
├── .gitignore
├── .npmignore
├── .travis.yml
├── gulpfile.js
├── LICENSE
├── package.json
├── README.md
项目面板
项目地址:https://www.npmjs.com/package/mixin.js
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGlnYW5nMjU4NTExNg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="这里写图片描写叙述" title="">
package.json关键字段说明
package.json文件必须是一个JSON,而非JavaScript对象。
更具体内容。请查看<package.json>
- name:最重要的字段之中的一个。项目名称(少于214个字节)。没有name和version不能进行安装;
- version:最重要的字段之中的一个,项目版本号。
没有name和version不能进行安装。改动项目代码的同一时候须要改动该version字段。
- description:项目描写叙述,帮助人们通过npm search发现该项目;
- keywords:关键字,帮助人们通过npm search发现该项目。
- license:开源声明;
| 类型 | 说明 |
|---|---|
| General Public License,简称GPL | 执行、复制软件的自由,发行传播软件的自由。获得软件源代码的自由,改进软件并将自己作出的改进版本号向社会发行传播的自由。 |
| BSD | 能够自由的使用。改动源代码,也能够将改动后的代码作为开源或专有软件再公布 |
| Massachusetts Institute of Technology,简称MIT | 赋予软体被授权人更大的权利与更少的限制 |
公布项目到NPM的更多相关文章
- Vue 项目: npm run dev 报错 webpack-dev-server
从码云上下载vue项目,运行npm run dev 时报错: > webpack-dev-server --inline --progress --config build/webpack.de ...
- create-react-app 创建的项目执行npm run eject后,运行报错
create-react-app 创建的项目执行npm run eject后,运行报错:Cannot find module '@babel/plugin-transform-react-jsx-so ...
- 微信小程序项目使用npm安装vant-weapp的正确步骤,简单易懂!!
微信小程序项目使用npm安装vant-weapp的正确步骤 1.在当前小程序项目目录npm init -y 构建npm项目 2.运行命令 npm install vant-weapp -S --pro ...
- 开发一个项目之npm
npm (nodejs平台上写的js模块的管理工具 下载.互相依赖等) npm install 本地项目的node_modules文件夹 , -g npm config prefix 目录eg: ...
- 下载一个vue项目执行npm install 后运行项目npm run dev后出错 - 问题解决
在SVN上拉下来一个vue项目,上面没有提交项目里面的node_modules文件夹,所以要自己执行 npm install 安装,但安装完后运行项目后却报错了: $ npm run dev > ...
- vue-cli项目里npm安装使用elementUI
第一步:进入到项目目录里 npm i element-ui -S 第二步:在main.js中引入 import ElementUI from 'element-ui' import 'element- ...
- Vue 项目: npm run dev b报错 “'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序 或批处理文件。”
前提: 电脑已经安装了nodeJS和npm, 项目是直接下载的zip包. 报错步骤为1:cd /d 目录: 2. npm ren dev -------> 报错如下: > webpac ...
- vue-cli3.0创建项目报npm install --loglevel error 踩坑的那把辛酸泪
创建项目 vue create vue-pro 然后如下图 一开始以为是npm的问题,卸载了Mac的node ,安装nvm,然后再安装node (可参考: Mac中nvm的安装和使用 https: ...
- 创建新react项目 运行npm start 报错踩过的坑
1.看react官网创建新的react项目 :npx create-react-app my-app cd到my-app npm start 遇见如下报错 这是因为电脑本地git的原因 ,不是 ...
随机推荐
- 南海区行政审批管理系统接口规范v0.3(规划)
1. 会话API 1.1. login [登录验证] {"r_code":"500","r_msg":"操作失败",&q ...
- NOIP 2012 D1T1 Vigenère密码
嗯嗯 一道找规律的题.... 真佩服那些把表打出来的人 //By SiriusRen #include <cstdio> #include <cstring> using na ...
- Android进程与线程
我们都知道,在操作系统中进程是OS分配资源的最小单位,而线程是执行任务的最小单位.一个进程可以拥有多个线程执行任务,这些线程可以共享该进程分配到的资源.当我们的app启动运行后,在该app没有其他组件 ...
- 基于S3C2440数码相框
[参考]韦东山 教学笔记 1. 程序框架1.1 触摸屏: 主按线程,通过socket发给显示进程 --------------------------- 封装事件:ts线程 按键线程 -------- ...
- 如何防范自己的IP泄漏
在正式进行各种“黑客行为”之前,黑客会采取各种手段,探测(也可以说“侦察”)对方的主机信息,以便决定使用何种最有效的方法达到自己的目的.来看看黑客是如何获知最基本的网络信息——对方的IP地址:以及用户 ...
- 定时器篇---java.util.TimerTask和quartz
最近项目中出现了定时执行任务的东西,研究了一下,觉得挺不错的,以后还用得到,就总结了下. 这里只介绍两种java.util.Timer 和 quartz java.util.Timer java自带的 ...
- js 按钮连击 减少触发事件次数
<body> <input type="button" onClick="testbtn()" value="测试按钮"& ...
- TCP连接的建立以及利用tcpdump分析连接建立的过程(转)
原文地址:http://www.cnblogs.com/coser/archive/2010/12/05/1968812.html 一.实验目的 实验1_1: 使用Freebsd/Linux操作系统下 ...
- 企业级任务调度框架Quartz(9) Quartz之作业触发器Trigger
前序: 我们已经大概对Quartz的基本有了一个大概的认识:现在我们将要逐渐对Quartz的各个重要组件进行学习:前面已经对job进行了详细讲解,现在我们来认识下它的一个重要兄弟,没有它,作 ...
- JA document的练习
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...