时间戳

首页 > 解决方案 > 将 React 应用程序导入现有的 Webpack 项目

reactjs - 将 React 应用程序导入现有的 Webpack 项目

问题描述

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

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

到目前为止，我已将 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'
     }
  }
}

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

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

有没有更好的方法来实现我想要实现的目标？

标签： reactjsnpmwebpack

解决方案

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

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

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

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

  1. 将规则添加到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"]
   },
   ...
 ]
}

  2. 安装 Babel 模块： 

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

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

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

  4. 像下面的脚本一样通过 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 依赖项（即会将 import
    语句转换为 require 语句）

推荐阅读