如何发布使用 create react app typescript 创建的许多反应组件的文件夹答案

【问题标题】：How to publish a folder of many react components created with create react app typescript如何发布使用 create react app typescript 创建的许多反应组件的文件夹
【发布时间】：2019-12-29 21:36:17
【问题描述】：

我一直在为一个大型项目使用带有 typescript 的最新 create react 应用程序，我在 src/lib/ 文件夹中构建了许多 UI 组件。然后，每个组件都在其自己的文件夹中，其中包含一个 index.tsx 和一个 style.scss。

当我运行yarn build 时，/build 目录是由于创建反应应用程序而创建的。我现在可以浏览整个项目，这很棒。但是当我查看 /build/static/ 内部时，所有的 javascript 现在都成块了。

为了将所有组件发布到 npm 并在另一个项目中重用它们，我需要将它们保存在相同的文件夹名称中，并将所有 .scss 转换为 .css 并将所有 .tsx 转换为 . js

下面是标准的tsconfig.json文件

{
 "compilerOptions": {
   "target": "es5",
   "lib": [
     "dom",
     "dom.iterable",
     "esnext"
   ],
   "allowJs": true,
   "skipLibCheck": true,
   "esModuleInterop": true,
   "allowSyntheticDefaultImports": true,
   "strict": true,
   "forceConsistentCasingInFileNames": true,
   "module": "esnext",
   "moduleResolution": "node",
   "resolveJsonModule": true,
   "isolatedModules": true,
   "noEmit": true,
   "jsx": "react"
 },
 "include": [
   "src"
 ]
}

还有来自 package.json 的脚本

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

我尝试安装@babel/cli 和@babel/preset-react 并制作了一个.babelrc 文件

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

但是当我跑步时 "compile": "NODE_ENV=production babel src --out-dir lib --extensions '.tsx, .scss'" .tsx 文件被复制并转换为 js，但 scss 不会被转换为 css。

【问题讨论】：

根据你的 webpack 配置（如果你使用 webpack），你的 CSS 代码可能会被注入到你的 HTML 文件中。请向我们提供有关您的捆绑器及其配置的更多详细信息。
我刚刚安装了 babel 和 create react app 引擎盖下的任何东西

标签： reactjs typescript babeljs create-react-app

【解决方案1】：

您正在使用 create-react-app 将您的 CSS 注入到 index.html 文件中。

这个库不足以创建一个 React 组合库。对于此类项目，您可能更喜欢create-react-library 等。

【讨论】：