使用 create-react-app 创建库

Using create-react-app to create a library

我正在尝试创建一个 React-Redux 库,我正在尝试使用 create-react-app 来获取样板代码,但它在构建脚本中包含了无关紧要的内容,例如 appHtml。

有没有办法将弹出的 create-react-app 转换为库 - 具体来说,我需要 将所有 js 文件打包成一个,而是将它们通过 babel 传递并生成每个 React 组件的单独文件?

package.json

中编辑以下内容
  1. name
  2. description
  3. scripts
  4. author
  5. license
  6. gitRepository

并执行 npm publish。它会在 npm

中发布您的图书馆

我已经设法在不弹出和使用 create react app 的内部依赖项的情况下构建库。我用 react-scripts@0.9.5 测试过它。首先你需要安装 babel-cli:

npm install --save-dev babel-cli

创建 .babelrc 文件,内容为:

{
  "presets": ["react-app"]
}

然后添加脚本到package.json:

"compile": "NODE_ENV=production babel src --out-dir lib --copy-files",

最后 运行:

npm run compile

这会将所有源代码从 src 编译到 lib 目录并简单地复制剩余的文件。不要忘记在 package.json 中声明主文件(例如 "main"="lib/index.js")。

但是有一个警告。如果你使用的文件无法用 babel 编译(例如 css 或字体),那么你的库的用户将需要设置适当的 (webpack) 加载器。

这是我迄今为止发现的最好的..使用库的 create-react-app https://github.com/Rubbby/create-react-library

也许你可以 bootstrap 你的项目是 js-library-boilerplate。 我已经使用了好几次,它足以让我尝试一下。它可以用作 vanila js 库或 react 库的基础(在引擎盖下使用 CRA)。

要使用它,您需要的是:

  • 克隆回购
  • 进行一些更改:


  • 编辑许可证文件

  • 编辑 package.json 信息(这些将用于为您的构建文件生成 headers)
  • 编辑库:"MyLibrary" 使用您库的导出名称 ./config/webpack。config.js
  • 编辑 ./bin/postinstall(如果您想在软件包安装时显示一条消息)

...你准备好了。 此外,所有配置都是开放的,因此您可以根据需要进行调整。 祝你好运!