Nerdy Poly Millionaires

    x-seed

    0.0.2 • Public • Published

    x-seed

    react组件开发规范


    创建组件的方式

    git clone --depth=1 https://github.com/ReactPlugin/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.jsapp.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组件编译文件,reactes6编译成es5bable配置文件。
    • 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

    Install

    npm i x-seed

    DownloadsWeekly Downloads

    5

    Version

    0.0.2

    License

    MIT

    Last publish

    Collaborators

    • tianxiangbing