简体   繁体   English

使用 create-react-app 创建库

[英]Using create-react-app to create a library

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-Redux 库,并且我正在尝试使用create-react-app来获取样板代码,但它在构建脚本中包含了 appHtml 之类的无关紧要的东西。

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?有没有办法把,抛射创建-反应,应用库-特别是我需要并不是所有js文件打包到一个,但实际上只是让它们经由巴贝尔并产生单独的文件中每个阵营的组成部分?

I have managed to build library without ejecting and using internal dependencies of create react app.我已经设法在不弹出和使用 create react 应用程序的内部依赖项的情况下构建库。 I've tested it with react-scripts@0.9.5 .我已经用react-scripts@0.9.5对其进行了测试。 At first you need to install babel-cli :首先你需要安装babel-cli

npm install --save-dev babel-cli

create .babelrc file with content:创建包含内容的.babelrc文件:

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

Then add script to package.json :然后将脚本添加到package.json

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

And finally run:最后运行:

npm run compile

This will compile all sources from src to lib directory and simply copy the remaining files.这会将所有源代码从src编译到lib目录并简单地复制剩余的文件。 Don't forget to declare the main file in package.json (eg "main"="lib/index.js" ).不要忘记在package.json声明主文件(例如"main"="lib/index.js" )。

However there is one caveat.但是,有一个警告。 If you are using files which cannot be compiled with babel (eg css or fonts) then the users of your library would need to set up appropriate (webpack) loaders.如果你使用的文件不能用 babel 编译(例如 css 或 fonts),那么你的库的用户需要设置合适的(webpack)加载器。

Edit the following in the package.jsonpackage.json编辑以下内容

  1. name
  2. description
  3. scripts
  4. author
  5. license
  6. gitRepository

and do npm publish .并执行npm publish It'll publish your library in npm它会在npm发布你的库

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

Maybe you could bootstrap youre projects with js-library-boilerplate .也许你可以用js-library-boilerplate引导你的项目。 I've use it several times and it's good enough to give it a try.我已经多次使用它,它足以尝试一下。 It can be used as a base for the vanila js libs or react libs (use CRA under the hood).它可以用作 vanila js libs 或 react libs 的基础(在幕后使用 CRA)。

To use it all you need, is to:要使用它,您需要:

  • clone repo克隆仓库
  • make some changes as:做一些改变:


  • Edit LICENSE file编辑许可证文件

  • Edit package.json information (These will be used to generate the headers for your built files)编辑 package.json 信息(这些将用于为您的构建文件生成标头)
  • Edit library: "MyLibrary" with your library's export name in ./config/webpack.config.js编辑库:“MyLibrary”,在 ./config/webpack.config.js 中使用您的库的导出名称
  • Edit ./bin/postinstall (If you would like to display a message on package install)编辑 ./bin/postinstall (如果你想在安装包时显示一条消息)

...and you a ready to go. ...你准备好了。 Also all configs are open so you can adjust it as you require.此外,所有配置都是开放的,因此您可以根据需要进行调整。 Good luck!祝你好运!

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM