菜鸟最近在项目上被要求将自己写的一个react组件发布到npm上，网上找了些资料尝试都失败了，考虑是不是因为项目是create-react-app起的导致publish的时候有问题，经过一通瞎搞最后也算是publish成功了，来分享一下发布的方法。
-
如果项目是由
create-react-app创建的话，可以直接在构建的项目中发布。具体的方法其实就是从自己组件的入口文件开始对组件进行编译，编译成低版本的js语言，采用的工具当然是babel。
这种方式的缺点在于需要自己去维护babel相关的依赖，具体的方法是首先添加.babelrc文件，在该文件下添加内容
{
"presets": [["@babel/preset-env"], ["@babel/preset-react"]],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
所以在这里首先需要安装一些babel相关的包
yarn add -D @babel/core @babel/cli @babel/preset-env @babel/preset-react
// 注意，包一定要装全，不然肯定报错
其中plugins里面的东西是为了支持一些babel还未支持的语法，其次在package.json文件中做一些修改，下面只列出做出修改的部分
{
// ....
"private": false,
"main": "lib/index.js",
// main字段指的是publish的组件的入口文件
// 先对项目执行yarn compile的命令得到编译后的lib文件夹，然后再针对打包后的文件进行publish
// files字段指的是自己需要publish的文件或者文件夹
"files": [
"lib"
],
"scripts": {
"compile": "NODE_ENV=production babel src --out-dir lib --copy-files --ignore __tests__,spec.js,test.js,__snapshots__"
}
// 添加compile字段来对编译组件，指定入口文件和输出的目录，注意一定要copy files不然会缺少某些文件
}
- 使用nwb起项目
我们发现上面针对create-react-app起的项目发布组件很复杂而且难以维护，官方推荐的是使用nwb来起一个组件的项目，发布就很简单了。
具体方法：
直接全局安装nwb，然后nwb new react-component react-hello来起一个项目，然后直接进项目然后yarn build就构建出来可以发布的内容了，包括es umd，然后执行npm publish就可以了
可以说是肥肠方便了，nwb起的项目里面还有一个demo文件夹，可以在里面直接引用你自己写的组件，来看组件实现的效果，棒。。。
