x-mobile-select

x-seed

react组件开发规范

---

创建组件的方式

git clone --depth=1 https://github.com/React-Plugin/x-seed.git x-组件名

安装npm依赖

npm install 

需要注意的是，这里的webpack版本都不是最新的版本.

启动本地调试服务

npm start

执行该命令后，你可以通过http://localhost:8090/查看dev下的页面效果.

组件的源代码存在于src目录下，css文件统一使用sass编写，如果需要使用less的需要配置webpack的配置文件,这里针对每一个文件目录作一下说明。

目录及文件结构

• src组件的源代码目录，里面的index.jsx是引用的components里的Seed.jsx（对应你的组件文件）,同理_index.scss引用components下的_Seed.scss（对应你的组件的样式）.
• dev是在开发过程中调试组件的运行目录。在这里固定app.js文件名，这里直接引用src目录下import Seed from '../src/index' ;在index.html中引用shared.js和app.js即可，如果有样式，就引用app.css。
• examples例子的目录，这是一个最终组件生成后的调用目录，与dev目录不同的是，这里的js调用的是最终生成的js代码，他来源于lib目录，在examples中，html要引用的js文件除了shared.js外，还需要引用调用组件的js文件夹目录名称的js,如例子中的app.js是放置在basic目录下的，所以引用的js名称也叫basic.js.
• lib生成组件的目录，这里的组件是基于es6语法的，最终将生成为es5的语法给用户直接调用，lib下的index.js就是最终生成的可以直接引用的组件名，同时对应有index.css的样式文件。
• scripts服务器脚本，这里放的是生成本地http服务的webpack热启动脚本。分别对应npm中的命令，下面会着重介绍。
• .babelrc组件编译文件，react从es6编译成es5的bable配置文件。
• package.json项目npm声明文件，这里面需要修改为自己对应的相关信息，这里对应几个bash的脚本命令

启动示例代码服务

npm run-script example

执行该命令后，你可以通过http://localhost:8080/查看example下的页面效果.

上面的两种服务都对应的webpack.config.js文件

生成最终的组件代码

npm run-script prepublish

此代码会在发布npm时自动执行。

发布gitbook静态站点

npm run-script docs

发布这个会在git上创建gh-pages分支，然后把_book下的文件提交至对应的github仓库。

发布至npmjs社区

$ npm adduser	
Username: your name
Password: your password
Email: yourmail[@gmail](/user/gmail).com
 
$ npm publish

关于作者

https://github.com/tianxiangbing