前端开发让前端飞Web前端之路

构建自己的npm包 简单实现

2017-07-28  本文已影响564人  ppCode

NPM 使用介绍

NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:

NPM 包构建

1. 创建demo目录,新建index.js文件

index.js文件示例:

module.exports.sayHello = function(){
    return "Hello World!";
}
2.在项目中引导创建一个package.json文件
npm init

快速创建可以使用npm init -y命令

注册npm账号

1.要发布npm包当然需要在npm官网注册一个属于自己的账号

npm官网地址: https://www.npmjs.com

2. 在cmd中登录账号

注册成功后,打开cmd进入到demo目录,登录账号:

npm login

输入用户密码以及邮箱,登录成功后可以输入查询命令:

npm whoami

就能看到你酷酷的账号名了~~

附:刚注册完有段时间可以发布npm包,过段时间需要邮箱验证通过才能发布包,不然会报错(无伤大雅~~)

上传npm包

1. cmd进到demo目录,输入如下命令:
npm publish

这时候npm报错大军要来了

npm ERR! publish Failed PUT 403
npm ERR! code E403
npm ERR! you do not have permission to publish "demo". Are you logged in as the
correct user? : demo

这是什么原因??就是与npm仓库的包名重复了

改改改~~
拿出package.json文件,把name字段值改成下面:

"name": "testfun"

注意你的name字段值不要跟我一样,不然还会包上述错误,避免相同包名就可以啦

还有一点要注意的是npm对包名的限制:不能有大写字母/空格/下滑线

上传成功后你就可以在npm官网看到:


pic.png

npm包管理

1. 管理npm包权限
查看模块拥有者 
$ npm owner ls <package_name> 
添加发布者 
$ npm owner add <user> <package_name> 
删除发布者 
$ npm owner rm <user> <package_name>
2. 撤销发布包( 在项目目录下执行 )
npm unpublish --force

主要是处于安全性考虑,在Azer NPM 撤包事件后,npm公布了一版新的规则,如下:

3. npm的版本控制
npm version patch
npm version minor
npm version major

例如:我原本的项目是1.0.0版本的话
若是1中情况,变为1.0.1
若是2中情况,变为1.1.0
若是3中情况,变为2.0.0

不过也可以在package.json中的version更改~~

使用npm包

1. 创建test目录,在目录中新建index.js及package.json文件

index.js文件代码:

var testfun = require("testfun");
console.log(testfun.sayHello());
2. 安装testfun包
npm install --save-dev testfun
3. 在项目目录中cmd输入
node index.js

就可以看到下面的效果啦~

pic.png

这是运行在node环境,那么像运行在浏览器该怎么弄呢~~
这时候就要用到browserify了

扩展

Browserify

1. 简介

Browserify 可以让你使用类似于 node 的 require() 的方式来组织浏览器端的 Javascript 代码,通过预编译让前端 Javascript 可以直接使用 Node NPM 安装的一些库。

2.Browserify是如何工作的
3. 运用到项目
npm install -g browserify
browserify index.js > bundle.js

在test目录新建index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="bundle.js"></script>
</head>
<body>

</body>
</html>

打开index.html就可以看到控制器中的效果:

pic2.png

这样就用有自己的npm包了(^ω^)~~

上一篇 下一篇

猜你喜欢

热点阅读