Question

我有一个使用Webpack捆绑资产的Rails应用程序。它目前不使用React。

在一个单独的存储库中，我创建了一个React应用程序。这个React应用程序基本上实现了一个复杂的自定义UI元素。计划是我可以将此React组件导入到我的主应用程序中。

到目前为止，我已将git repo添加到我的package.json文件中，可以看到我的react应用的源代码已下载到/node_modules文件夹中。

我可以通过添加以下内容使Webpack捆绑该应用程序：

至React应用package.json：

"prepare": "npm run build"

在我的主应用程序webpack.config

中

module.exports = {
  ...
  resolve: {
     ...
     alias: {
        MyReactApp: 'my-react-app/dist/bundle.js'
     }
  }
}

但是它似乎是在bundle.js内捆绑我的React应用程序使用的所有库，而不是将它们添加到依赖树中。

看来prepare命令基本上是将我的React应用程序捆绑到一个/dist/bundle.js文件中，而Webpack只是按原样包含了此文件。我需要Webpack来管理我的React应用程序的依赖关系，这样我才不会在Webpack的最终输出中重复不必要的库。

是否有更好的方法来实现我要实现的目标？

Answer 1

最好将它们捆绑在一起。基本上，它试图捆绑已经捆绑的代码。这可能有效：

resolve: {
    alias: {
       MyReactApp: 'my-react-app/index.js'
    }
}

index.js应该是jsx的主要起点。

此外，您需要为jsx文件添加编译规则，我从未捆绑Rail应用程序，但React应用程序应遵循以下步骤；

将规则添加到webpack.config.js

module: {
 rules: [
   {
     // this is so that we can compile any React,
     // ES6 and above into normal ES5 syntax
     test: /\.(js|jsx)$/,
     // we do not want anything from node_modules to be compiled
     exclude: /node_modules/,
     use: ["babel-loader"]
   },
   ...
 ]
}

安装Babel模块：

npm install @babel/core @babel/node @babel/preset-env @babel/preset-react babel-loader

创建一个名为.babelrc的文件并粘贴以下代码

{
  "presets": ["@babel/env", "@babel/react"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

像下面的脚本一样通过babel-node运行webpack

"webpack": "babel-node ./node_modules/webpack/bin/webpack"

这将是我解决此问题的方法。它仍然会导入对您的项目的反应。但是，它不会添加已编译的项目，而是会添加jsx文件并在捆绑过程中对其进行编译。

注意：

babel / core ，用于将ES6及更高版本编译为ES5
babel / node ，以便我们可以将插件和程序包导入webpack.config.js内，而不需要它们（这只是我喜欢的东西，也许您也会喜欢）
babel / preset-env 这将确定要使用的转换或插件以及polyfill（即，它提供了现代的旧版浏览器本身不支持的功能）基于您要支持的浏览器矩阵
babel / preset-react ，这会将React代码编译成ES5代码
babel-loader 这是一个Webpack帮助程序，可通过Babel转换JavaScript依赖项（即，将转换导入
陈述成要求的陈述）

将React App导入现有的Webpack项目

1 个答案: