使用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