npm 套件製作

6/16的時候開始研究怎麼做npm套件，爬了一些文章，發現網路很多文章沒有交代很多
細節，需要爬很多文章才知道怎麼做。

在babel編譯的過程中也蠻多問題的

1. 如果使用create-react-app的話，babel的config這樣設定就好

   "babel": {
     "presets": [
       [
         "react-app"
       ]
     ]
   },

2. 接下來打指令

   rm -rf dist && mkdir dist && babel ./src/components -d dist --copy-files

3. 發現錯誤，沒有安裝babel
   ‘babel’ is not recognized as an internal or external command,
   趕快來安裝一下：
   npm install --save-dev @babel/cli
4. 結果又加了一個index.js把所有元件導出，還在package.json加上
   "main": "dist/export.js",
5. 後來又報錯：
Error: [BABEL] C:\demo\monolith\package\src\components\AccountInfo.js: Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` e
nvironment variables. Valid values are "development", "test", and "production". Instead, received: undefined. (While processing: "C:\\demo\\monolith\\packa
ge\\node_modules\\babel-preset-react-app\\index.js")

   還要再安裝cross-env
   npm i cross-env
   再修改指令成

   rm -rf dist && mkdir dist && cross-env NODE_ENV=development babel ./src/components -d dist --copy-files

6. host站要把 package-lock.json 和 node_modules 刪光，再輸入
   npm install --save ./../package
7. 可以加以下指令到script，要重裝很方便
   rm -rf node_module/custom_module && npm install

 

npm線上版：

首先需要先登入

npm login

接下來把代碼編譯 ES6 => ES5

npm run publish:npm

※已經編譯過就可以跳過這步

然後把package.json的名子改掉

"name": "@catsheue/lib",

之後說我要公開？

npm publish --access=public

然後就可以發佈了，注意版本號

npm version 1.0.2

可以直接更新版本號
※打 git tag 1.0.x 並不會更新package.json裡的版本號

npm publish

 

參考文章
Publishing Packages using npm
How to Publish ES6 React Modules to NPM
Building a React component as an NPM module
The complete guide to publishing a React package to npm
Create a simple React npm package in simple steps using CRA
How to make a beautiful, tiny npm package and publish it
How to Create and Publish React Components using the create-react-app?
How to Publish an Updated Version of an npm Package