npm是目前最大的包服务平台,前端基本无人不知,无人不晓了,初期我们可能都是在用别人封装到npm的包,那随着自身实力的增长,怎么打一个自己的包并上传到NPM呢?很简单,下面就是基本步骤,一切从简:
1.在任意目录创建一个文件夹,比如叫"my-npm-hello";
2.进入该文件夹,在该目录下运行命令行,然后直接npm init --yes(--yes就是表明你都是用默认的配置信息,也可以不带这个参数,命令行会提示你一个一个输入信息),会生成一个package.json的文件,参数说明如下:
name:包名
version:版本,第一个数字一般为版本不兼容改动,第二个数字为版本兼容的功能修改,第三个为版本兼容的bug修复
description:包的说明
main:入口文件
scripts:可执行的脚本命令
keywords:关键字
author:作者
license:许可证书
3.在项目目录下创建src文件夹和index.js文件;src存放开发的代码源文件;index.js为包入口;
4.index.js中输入下面内容
module.exports = require('./lib/hello.js')
这里使用的是lib而不是src,是因为使用的es6语法,为了使依赖此项目的项目的不必须使用es6,准备使用bable把src里的js源码编译成通用的JS代码;
5.在src文件夹中创建hello.js文件,内容如下
class SayHello{
say(){
console.log("hello world!!")
}
}
6.因为要使用bable进行打包,安装bable相关功能和rimraf,rimraf用来清理文件,在命令行中输入
npm install rimraf babel-cli babel-preset-es2015 --save-dev
7.打开package.json在scrips中加入cleanLib,bableBuild,prepublish。如下:
{
"name": "my-hello-sgzwy",
"version": "1.0.0",
"description": "test hello",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"cleanLib":"./node_modules/.bin/rimraf lib",
"bableBuild":"./node_modules/.bin/babel src --out-dir lib",
"prepublish":"npm run cleanLib && npm run bableBuild"
},
"keywords": [
"hello",
"npm"
],
"author": "zb",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"rimraf": "^2.6.3"
}
}
cleanLib 用来清理lib中已有的内容
bableBuild 用bable把src中的文件打包编译到lib中
prepublish 执行上面两个脚本,prepublish会在npm publish前执行
8.在项目根目录创建.babelrc文件,内容如下
{
"presets": [
"es2015"
]
}
说明一下,这个文件要用命令来创建,不会的自己去百度吧,就不做详解了
最终目录如下:
9.上npm官网注册账号,记住邮箱一定要验证才能使用
10.发布
npm publish
过程中会让你输入用户名和密码,以及验证的邮箱,都必须要正确无误!
几个坑说一下:
1.邮箱我用的是qq邮箱,之前用的公司企业邮箱尼玛硬是说没验证,命名验证过了,WTF;
2.最好上NPM注册账号,用npm adduser 有时会莫名其妙的出问题;
3.如果你之前配置了淘宝镜像,记得换回来才能上传到npm
npm config set registry https://registry.npmjs.org
4.项目的名字一定要唯一,不然也上传不上去