使用create-react-app创建库 [英] Using create-react-app to create a library

问题描述

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

I'm trying to create a library of React-Redux and I'm trying to use create-react-app to get the boilerplate code but it include in the build script things like appHtml which are irrelevant.

有没有办法将弹出的创建-react-app to library - 特别是我需要不将所有js文件打包成一个，而只是通过babel传递它们并为每个React组件生成单独的文件？

Is there a way to turn ejected create-react-app to library - specifically I need to not package all js files into one but instead just pass them through babel and produce separate files for each React Component?

推荐答案

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

I have managed to build library without ejecting and using internal dependencies of create react app. I've tested it with react-scripts@0.9.5. At first you need to install babel-cli:

npm install --save-dev babel-cli

create .babelrc 包含内容的文件：

create .babelrc file with content:

{
  "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）。

This will compile all sources from src to lib directory and simply copy the remaining files. Don't forget to declare the main file in package.json (e.g. "main"="lib/index.js").

但有一点需要注意。如果您使用的文件无法用babel编译（例如css或字体），那么您图书馆的用户需要设置适当的（webpack）加载器。

However there is one caveat. If you are using files which cannot be compiled with babel (e.g. css or fonts) then the users of your library would need to set up appropriate (webpack) loaders.

这篇关于使用create-react-app创建库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！