构建自己的npm包简单实现

最新推荐文章于 2022-02-21 20:26:26 发布

weixin_34258078

最新推荐文章于 2022-02-21 20:26:26 发布

阅读量291

点赞数

文章标签： json javascript 前端 ViewUI

原文链接：https://segmentfault.com/a/1190000010398983

版权

NPM 使用介绍

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

允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

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官网看到：

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公布了一版新的规则，如下：

版本更新少于24小时的包允许下架；
超过24小时的包的下架需要联系npm维护者；
如果有npm维护者参与，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

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

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

扩展

Browserify

1. 简介

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

2.Browserify是如何工作的

Browserify从你给你的入口文件开始,寻找所有调用require()方法的地方, 然后沿着抽象语法树,通过 detective 模块来找到所有请求的模块.
每一个require()调用里都传入一个字符串作为参数,browserify把这个字符串解析成文件的路径然后递归的查找文件直到整个依赖树都被找到.
每个被require()的文件,它的名字都会被映射到内部的id,最后被整合到一个javascript文件中.

3. 运用到项目

全局安装browserify

npm install -g browserify

使用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就可以看到控制器中的效果：

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