结构说明

shields.io

├── example // 示例代码，在自己测试的时候可以把测试文件放到 src 里 │   └── src // 示例源代码 │   ├── index.html // 示例 html │   └── app.js // 添加到 react-dom 的文件 ├── package.json ├── src // 组件源代码 │   └── index.js // 组件源代码文件 ├── .babelrc ├── .editorconfig // 不必须的，但是建议有 ├── .gitignore // 如果要放到 github 上，这个是需要有的 └── webpack.config.js

import React from 'react';
// 代码块

• 编译源码 我们现在的源码是 jsx 的，所以我们需要通过 babel 把 jsx 编译为正常浏览器能访问的代码。我们可以通过 babel-cli 来编译我们代码，直接编译 src 目录，到 lib 文件夹。更多命令见 babel-cli

npx babel src --out-dir lib 执行完这个命令，就把生成一个 lib 文件夹，然后里面的 index.js 就是编译过后的文件，是可以直接发布到 npm 的文件。 然后将这个编译命令写到 script 里，package.json 如下："main": "lib/index.js", npm run build npm run compile