從零系列－－開發npm包（一）

1、目的

主要是紀錄和回顧本身開發的一些步驟以及遇到的一些問題和解決方案

2、準備工做

一、IDE 選擇 VS Code

二、安裝node 環境 （https://nodejs.org/zh-cn/）

三、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

四、npm   

　 （1）註冊新用戶 （https://www.npmjs.com）

　 （2）本地添加用戶 工程下執行 （文檔：https://docs.npmjs.com/misc/developers）

　　    npm adduser

 3、開發

 一、在根目錄下 新建 index.js 文件 用於功能入口文件

 二、新建一個module目錄用於存放模塊文件

 4、編譯

 一、安裝bebel－cli 進行編譯

npm i babel－cli －d

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

　　

二、安裝 webpack 打包

npm i webpack－cli －d

　　

三、編輯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編譯
     ] 

  } 
}

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

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

五、執行命令

npm run build

　　

 5、調試

  一、下載Debugger for Chrome 擴展 （因爲我開發的npm包是用於前端的）

  二、調試node包  在下圖文件中添加

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

  三、調試前端引入組件 在下圖文件中添加

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

 

 6、提交代碼及發佈

 一、提交代碼

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

二、發佈

npm version $VERSION --message "message"//$VERSION 爲發佈版本號

npm publish