npm项目创建打包发布

操作系统：windows 7

前提是已经安装了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，显示下面信息
   
   这个过程就是在当前目录（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为包入口；目前项目结构如下：
   
   
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"
    
    cleanLib 用来清理lib中已有的内容
    bableBuild 用bable把src中的文件打包编译到lib中
    prepublish 执行上面两个脚本，prepublish会在npm publish前执行
    
11. 在项目根目录创建.babelrc文件，内容如下
    
    {

    "presets": [

    "es2015"

    ]

    }
    配置bable对es6(es2015)进行转换
    
12. 当前项目结构：
    
    
13.  代码已经准备好了，还需要一个npm的帐号，到npm官网或使用npm adduser命令添加帐号，注意需要邮箱里验证一下。还要注意如果使用过淘宝或其它的npm镜像，要换成官方库，在命令行执行下面命令
    npm config set registry http://registry.npmjs.org(这句是有坑的，看后面)
    然后执行npm adduser如下
    
14. 终于可以发布了，在命令行执行npm publish
    
    很坑爹，没有发布成功，也没有错误提示。只需要把http://registry.npmjs.org换成https://registry.npmjs.org，在命令行执行npm config set registry https://registry.npmjs.org
15. 再次执行npm publish
    有异常提示就好办了，因为与别人的项目同名了
16. 到package.json里改个名字
    
    执行npm publih
    
    还是不行，因为名字引发了垃圾邮件检测，不放弃继续改
17. 名字改为npm-project2328，执行npm publish
    终于成功了，收到一封来自npm的邮件：
    
    
18. 去npm网站上看下
    
19. 在其它项目中就可以npm install npm-project2328使用这个包了