从零系列－－开发npm包（一）

一、目的

主要是纪录和回顾自己开发的一些步骤以及遇到的一些问题和解决方案

二、准备工作

1、IDE 选择 VS Code

2、安装node 环境 （https://nodejs.org/zh-cn/）

3、git仓库  gitlab （https://gitlab.com）

　　(1)  注册

    （2）add ssh key（可以看一下 https://gitlab.com/help/ssh/README.md）

    （3）新建project 

　 （4）git clone 到本地

　　(5)  工程下执行

　　　　npm init

4、npm   

　 （1）注册新用户 （https://www.npmjs.com）

　 （2）本地添加用户 工程下执行 （文档：https://docs.npmjs.com/misc/developers）

　　    npm adduser

 三、开发

 1、在根目录下 新建 index.js 文件 用于功能入口文件

 2、新建一个module目录用于存放模块文件

 四、编译

 1、安装bebel－cli 进行编译

npm i babel－cli －d

babel index.js  module/* module/**/* -d dist -s inline

　　

2、安装 webpack 打包

npm i webpack－cli －d

　　

3、编辑webpack.config.js (dev环境 足够简单 没必要加些多余的插件 且 vscode 已经加了eslint 语法检测 关于配置可以参考文档)

let path = require('path')

module.exports = {
    entry:path.resolve(__dirname,'./index.js'),//入口文件
    output:{
      path:path.resolve(__dirname,'./dist'),//输出路径
      filename:'index.js',//输出文件名
      library: 'kdUploader',//库名
      libraryTarget:'umd'/／可以参考 导出库(exported library)的类型

 },
  mode:'development',//定义开发环境
  module:{
     rules:[
        { test:/\.js(x)?$/, exclude: /node_modules/, use:['babel-loader'] }//对js或jsx文件用babel－loader编译
     ] 

  } 
}

4、在package.json 文件中scripts 下加入build命令

"build": "webpack --config webpack.config.js -w"

5、执行命令

npm run build

　　

 五、调试

  1、下载Debugger for Chrome 扩展 （由于我开发的npm包是用于前端的）

  2、调试node包  在下图文件中添加

{
            "type": "node",
            "request": "launch",
            "name": "启动程序",
            "program": "${workspaceFolder}/dist/index.js"//功能入口文件
}

  3、调试前端引入组件 在下图文件中添加

{
            "name": "Launch index.html",
            "type": "chrome",
            "request": "launch",
            "file": "${workspaceFolder}/test/index.html"//测试起始html文件路径
 }

 

 六、提交代码及发布

 1、提交代码

git add -A
git commit -m 'message'
git push -u origin master

2、发布

npm version $VERSION --message "message"//$VERSION 为发布版本号

npm publish