npm项目如何创建打包并发布

DurkBlue1个月前 ( 04-24 )49抢沙发
npm项目如何创建打包并发布摘要: 前提是已经安装了nodejs和npm。当前nodejs版本:v10.2.0;npm版本:6.1.0。本示例工具使用Visual Studio Code 1.20.1(vs code...

前提是已经安装了nodejs和npm。当前nodejs版本:v10.2.0;npm版本:6.1.0。


本示例工具使用Visual Studio Code 1.20.1(vs code),也可以使用其它工具


下面开始操作


1.在某个磁盘分区下创建项目目录:my-npm-project。例如:E:\Workspace\my-npm-project

2.启动vs code

3.点击vs code左上角“文件” ->“打开文件夹”,打开“E:\Workspace\my-npm-project”

4.快捷键ctrl+`打开“终端”(如果已经是打开状态的忽略此步骤)

5.在终端窗口中输入npm init --yes,显示下面信息

npm项目如何创建打包并发布 第1张

这个过程就是在当前目录(E:\Workspace\my-npm-project)创建了一个名称为package.json的文件,并写入下面的信息

{

  "name": "my-npm-project",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "keywords": [],

  "author": "langfutao2018",

  "license": "ISC"

}



name:包名

version:版本,第一个数字一般为版本不兼容改动,第二个数字为版本兼容的功能修改,第三个为版本兼容的bug修复

description:包的说明

main:入口文件

scripts:可执行的脚本命令

keywords:关键字

author:作者

license:许可证书

6.在项目根目录下创建src文件夹和index.js文件。src存放源文件;index.js为包入口;目前项目结构如下:

npm项目如何创建打包并发布 第2张

7.index.js中输入下面内容

module.exports = require('./lib/HelloWorld.js')

这里使用的是lib而不是src,是因为我们打算使用es6语法,为了使依赖此项目的项目的不必须使用es6,准备使用bable把src里的源文件打包编译到lib中

8.在src创建HelloWorld.js文件,内容如下

/** 测试类 */

class HelloWorld {

    /**     

     * 在页面中显示hello world

     */

    say() {

        let div = document.createElement('div')

        div.innerHTML = 'hello world'

        document.body.appendChild(div)

    }

}


9.现在准备使用bable进行打包,安装bable相关功能和rimraf,rimraf用来清理文件,在命令行中输入

npm install rimraf babel-cli babel-preset-es2015 --save-dev

10.打开package.json在scrips中加入cleanLib,bableBuild,prepublish。如下:

"cleanLib": "./node_modules/.bin/rimraf lib"

"bableBuild": "./node_modules/.bin/babel src --out-dir lib",

"prepublish":"npm run cleanLib && npm run bableBuild"

npm项目如何创建打包并发布 第3张

cleanLib 用来清理lib中已有的内容

bableBuild 用bable把src中的文件打包编译到lib中

prepublish 执行上面两个脚本,prepublish会在npm publish前执行

11.在项目根目录创建.babelrc文件,内容如下

{

    "presets": [

        "es2015"

    ]

}

配置bable对es6(es2015)进行转换

12.当前项目结构:

npm项目如何创建打包并发布 第4张

13.代码已经准备好了,还需要一个npm的帐号,到npm官网或使用npm adduser命令添加帐号,注意需要邮箱里验证一下。还要注意如果使用过淘宝或其它的npm镜像,要换成官方库,在命令行执行下面命令

npm config set registry http://registry.npmjs.org(这句是有坑的,看后面)

然后执行npm adduser如下

npm项目如何创建打包并发布 第5张

14.终于可以发布了,在命令行执行npm publish

npm项目如何创建打包并发布 第6张

很坑爹,没有发布成功,也没有错误提示。只需要把http://registry.npmjs.org换成https://registry.npmjs.org,在命令行执行npm config set registry https://registry.npmjs.org

15.再次执行npm publish

npm项目如何创建打包并发布 第7张

有异常提示就好办了,因为与别人的项目同名了

16.到package.json里改个名字

npm项目如何创建打包并发布 第8张

执行npm publih

npm项目如何创建打包并发布 第9张

还是不行,因为名字引发了垃圾邮件检测,不放弃继续改

17.名字改为npm-project2328,执行npm publish

终于成功了,收到一封来自npm的邮件:

npm项目如何创建打包并发布 第10张

18.去npm网站上看下

npm项目如何创建打包并发布 第11张

在其它项目中就可以npm install npm-project2328使用这个包了

此篇文章由DurkBlue发布,转载一下需要注明来处

分享到:
0
赞(0

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

发表评论取消回复

快捷回复:

评论列表 (暂无评论,49人围观)参与讨论