构建自己的npm包简单实现

frontoldman 发布于2019-08-20 18:22 / 3283人阅读

摘要：使用介绍是随同一起安装的包管理工具，能解决代码部署上的很多问题，常见的使用场景有以下几种允许用户从服务器下载别人编写的第三方包到本地使用。允许用户将自己编写的包或命令行程序上传到服务器供别人使用。

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  
添加发布者 
$ npm owner add   
删除发布者 
$ npm owner rm

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:

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

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

云服务器 GPU云服务器构建自己的云服务器怎么构建自己的云服务器怎样构建自己的云服务器 NPM包管理器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84428.html

[译]Yarn：一个新的JavaScript包管理器

摘要：第一个主要的包管理器在被引用后不久就搭建起来了，并且迅速成为世界上最受欢迎的包管理器之一。简介是一款新的包管理器，在取代客户端和其他包管理器现有工作流的同时，又保留了对代理的兼容性。在JavaScript社区，工程师们分享了成百上千的代码段，我们不用自己从头编写基础组件、类库或者框架。反过来，每段代码又或许依赖于其它的代码段，而这些依赖就是通过 package managers(包管...

Steve_Wang_ 2019-08-20 11:37 评论0 收藏0
前端构建工具整理

摘要：常见前端构建工具的分类和对比是附带的包管理器，是内置的一个功能，允许在文件里面使用字段定义任务在这里，一个属性对应一段脚本，原理是通过调用去运行脚本命令。前文端技术范围不断发展，前端开发不仅限于直接编写html，css和javascript，Web应用日益庞大，代码也更加庞大，因此许多新的思想（例如模块化和工程化等）和框架（React和Vue等），以及新的语言（Es6 TypeSc...

leo108 2019-08-23 10:53 评论0 收藏0
JavaScript 编程精解中文第三版十、模块

摘要：来源编程精解中文第三版翻译项目原文译者飞龙协议自豪地采用谷歌翻译编写易于删除，而不是易于扩展的代码。模块之间的关系称为依赖关系。用于连接模块的最广泛的方法称为模块。模块的主要概念是称为的函数。来源：ApacheCN『JavaScript 编程精解中文第三版』翻译项目原文：Modules 译者：飞龙协议：CC BY-NC-SA 4.0 自豪地采用谷歌翻译编写易于删除，而不是易于扩...

justjavac 2019-08-23 18:18 评论0 收藏0
使用 NodeJS 构建现代化的命令行工具

摘要：前言这是一篇关于如何使用构建高性能高可读性的现代化命令行工具的博客。对于命令行工具来说，运行时的权限是巨大的，但不要因此弄脏用户的系统。前言这是一篇关于如何使用 NodeJS 构建高性能、高可读性的现代化命令行工具的博客。每当我们想要创建一个基于 NodeJS 的命令行工具时，就会衍生出一堆问题需要解决，比如如何准备开发环境，如何打包转译代码，如何使代码在转译后保持可调用的状态同...

QLQ 2019-08-23 18:15 评论0 收藏0
【译】一个小时搭建一个全栈Web应用框架（上）

摘要：初始项目设置我们将使用包管理器来处理依赖项。使用包管理器可以使您的项目依赖项保持最新状态，并能够获取和安装最新的包。是小型应用的最佳选择之一。翻译：疯狂的技术宅英文标题：Creating a full-stack web application with Python, NPM, Webpack and React英文原文：https://codeburst.io/creating....

wizChen 2019-08-21 11:59 评论0 收藏0