使用CRA開發的基於React的UI組件發布到內網NPM上去

前言：構建的ES組件使用CNPM發布內網上過程

 

1. 使用Create-React-APP開的組件 如果直接上傳到NPM，你引用的時候會報：

You may need an appropriate loader to handle this file type.  如果你直接復制到你的項目里比如Src下是可以的。 這個原因是webpack設置了默認對node_modules文件夾中不進行babel轉碼，有助於提升打包效率。

因此我選擇將該組件先轉化為ES5語法，然后發布到 NPM 社區。 你也可以設置對其打包，這樣會很慢很慢.

 

 

2. ishow UI 依賴：

    yarn add react-click-outside async-validator classnames throttle-debounce raf

3.  把es6轉es5:

  yarn add babel-cli babel-preset-es2015 babel-preset-react babel-preset-stage-0 cross-env --dev

4.  修改  package.json 文件main 屬性為 "main": "lib/index.js" 

5.  編輯 .babelrc 文件

{
    "presets": [
      "es2015",
      "stage-0",
      "react"
    ]
  }

， 你也可以不編寫這個文件，那么babel會調用package.json里的 babel-preset-react-app來轉換，因為你的package.json里有如下配置：

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

6.  在你的package.sjon script：里增加如下命令：

"es6": "cross-env NODE_ENV=production npx babel src --copy-files --extensions .js,.jsx --out-dir lib"  這個表示把 src下面的所有js jsx文件打包到lib目錄下，其它文件直接復制過去。

　　　　1).這里如果不設置NODE_ENV=production babel不工作

               2).如果有.babelrc文件打包出來的是純es5, 如果沒有打包出來的是es6

               3）如果是window平台可以直接set  NODE_ENV=production 然后運行 npx babel src --copy-files --extensions .js,.jsx --out-dir lib

 

然后 yarn run es6即可生成lib文件目錄，把這個集成到npm里即可調用 

 

 7.上傳項目到NPM,如果你使用cnpm

1. cnpm  set registry http://npm.你們的域名.org/  如果是公網不需要這一步

2. cnpm login
      type username and password with domain account
3. cnpm pub