将你的组件发布到npm平台上

npm包管理工具前端同学应该不陌生了&＃xff0c;npm平台上有大量的优秀包&＃xff0c;我们只需要简单几行命令就能down下来我们想要的东西&＃xff0c;不用到处求种&＃xff0c;而且版本控制十分方便。如何将自己的组件或者插件发布到npm平台上去&＃xff0c;方便项目中使用和其他人使用&＃xff0c;本文介绍如何将一个react组件发布到npm平台上去。

在实际动手之前&＃xff0c;先要查阅资料预见困难&＃xff0c;分析执行步骤&＃xff1a;

一个包的格式&＃xff0c;应该有哪些东西。
将项目发布到npm平台上去。
持续集成。

组件格式

发布到npm平台的包&＃xff0c;是一个项目工程&＃xff0c;跟我们平时工作中的项目类似&＃xff0c;应该有完整的一套构建&＃xff0c;开发&＃xff0c;测试&＃xff0c;打包压缩等步骤&＃xff0c;所以应该把这个包当成一个项目来对待。

qj-button ├── example # 存放demo的代码 │ ├── src │ │ ├── ButtonPage.js │ │ └── index.js # 示例的入口文件 │ └── index.html # 示例页面 ├── lib # 真实引用编译过的代码 │ └── Button.js # 编译过的源码 ├── src # 存放源码的目录 │ └── Button.js # 组件源码 ├── style # 样式文件 │ ├── base.scss │ ├── button.scss │ └── common.scss ├── .bebalrc # babel配置文件 ├── .travis.yml # travis配置文件 ├── index.js # 项目入口文件 ├── style.css # 项目样式文件 ├── package.json ├── postcss.config.json ├── webpack.config.json # 项目开发demo的时候需要用到的webpack └── README.md

这里要注意的点&＃xff1a;

原文件&＃xff1a;项目原文件在src下&＃xff0c;原文件用ES6编写。原文件不可直接使用&＃xff0c;需要打包编译之后才能使用。
编译&＃xff1a;这里的编译有两种方式&＃xff1a;使用babel编译&＃xff1b;使用webpack编译。前者只能编译js&＃xff0c;后者则可以编译很多类型的文件。我这里使用的babel编译&＃xff0c;命令&＃xff1a;./node_modules/.bin/babel src --copy-files --source-maps --extensions .js --out-dir lib将src目录下的js文件编译到lib目录下。
样式&＃xff1a;scss样式引入也有两种&＃xff1a;使用sass命令编译&＃xff0c;输出到根目录style.css&＃xff1b;使用webpack编译src文件的时候&＃xff0c;将样式打包编译到js文件里。两者区别也很明显&＃xff1a;前者需要手动编译&＃xff0c;也需要手动引入&＃xff0c;比较麻烦&＃xff0c;但是文件独立&＃xff0c;方便管理&＃xff1b;后者自动编译&＃xff0c;样式扩展性较差。各有取舍。
demo&＃xff1a;项目里有个example文件夹&＃xff0c;里面是项目示例代码&＃xff0c;本地开发的时候跑的项目&＃xff1b;也有的包里面是docs文件夹&＃xff0c;文档形式介绍。
测试&＃xff1a;有的包本地开发的时候会有测试脚本&＃xff0c;本地会有一个test文件夹&＃xff0c;用于存放测试脚本。

项目完成之后&＃xff0c;需要添加一个入口文件index.js&＃xff0c;将你的组件导出&＃xff1a;

module.exports &＃61; require(&＃39;./lib/Button&＃39;); exports.default &＃61; require(&＃39;./lib/Button&＃39;);

需要改一下package.json里面的配置文件&＃xff1a;

{"main": "index.js","style": "style.css","files": ["lib"] }

上述代码指定入口文件和样式文件&＃xff0c;并且发布的时候&＃xff0c;只发布lib目录下文件和其余根目录的文件&＃xff0c;其余的文件夹里的会传到github上&＃xff0c;并不会被发布到npm平台上。

// 不会被npm忽略的文件 package.json README (and its variants) CHANGELOG (and its variants) LICENSE / LICENCE// 一定会忽略的 node_modules .*.swp ._* .DS_Store .git .hg .npmrc .lock-wscript .svn .wafpickle-* config.gypi CVS npm-debug.log npm发布