Babel.js 编译创建React应用程序的打字脚本以导入另一个React应用程序

w6mmgewl 于 2022-12-08 发布在 Babel

关注(0)|答案(1)|浏览(150)

我有一个用Typescript编写的Create React应用程序，我将称之为MyApp。我想在一个已经存在的React应用程序中运行此应用程序，我将称之为ExistingApp。
我想使用它如下：

import App from "node_modules/@MyApp/src"

function ExistingApp() {
   return (
     <div className="App">
       <App />
     </div>
   );
}

export default ExistingApp;

我想做这个编译/翻译使用Webpack。我想文件夹结构，以保持没有捆绑到一个单一的JS文件的一切。我已经设法达到了预期的结果与

tsc --module commonjs --outDir dist

然而，我的.scss文件没有被复制到dist文件夹。dist文件夹只包含transpiled的js文件。

babeljs

来源：https://stackoverflow.com/questions/72755431/compiling-a-typescript-create-react-app-to-import-in-another-react-app

1条答案

按热度按时间

njthzxwz1#

下面的解决方案是让webpack使用Sass，捆绑。如果你不想捆绑，我不会使用webpack在所有。

在生产中，请尝试：

1.使用以下命令安装这些软件包

npm i --save-dev sass-loader node-sass mini-css-extract-plugin css-loader style-loader

1.将以下代码片段添加到规则数组中的Webpack配置中（确保在配置文件中导入MiniCssExtractPlugin）

{
     test: /\.(s(a|c)ss)$/,
     use: [MiniCssExtractPlugin.loader,'css-loader', 'sass-loader']
}

导入MiniCssExtractPlugin（将其放在配置的顶部）：

import * as MiniCssExtractPlugin from "mini-css-extract-plugin"

或

const MiniCssExtractPlugin = require("mini-css-extract-plugin")

在开发过程中，你可以这样做

1.与示例1中的步骤1相同
1.在与示例1相同的位置使用此代码片段（无需导入MiniCssExtractPlugin）

{
    test: /\.(s(a|c)ss)$/,
    use: ['style-loader','css-loader', 'sass-loader']
}

Source

赞(0）回复(0）举报 2022-12-08

我来回答

Babel.js 编译创建React应用程序的打字脚本以导入另一个React应用程序

1条答案

在生产中，请尝试：

导入MiniCssExtractPlugin（将其放在配置的顶部）：

在开发过程中，你可以这样做

相关问题

热门标签

最新问答