reactjs - 如何导入在 webpack 中创建的包？-6ren

reactjs - 如何导入在 webpack 中创建的包？

转载作者：行者123 更新时间：2023-12-03 13:40:40

25

4

我有一个通过 webpack 捆绑的 Project1。我的要求是将此bundle.js放在CDN上，以便我可以在Project2中使用项目1中导出的模块。

项目 1 文件 ->

Hello.jsx:

import React, { Component } from "react";

export default class Hello extends Component {

  render() {
    return (
      <h1>Hello World</h1>
    );
  }
}

index.js:

export {Hello} from "./src/Hello.jsx";

<小时/>

我正在创建一个名为 bundle.js 的 bundle ，出于演示目的，我只是复制此 bundle.js(在相同的目录中)，而不是将其添加到 CDN 中。文件夹(App.jsx)并在 Project2 中引用它。

项目 2 文件 ->

App.jsx:

import React, { Component } from "react";
import Hello from "./bundle.js";

export default class App extends Component {
    render() {
        return (
            <Hello/>
        );
    }
}

index.js:

import React, { Component } from "react";
import ReactDOM from "react-dom";
import App from "./src/App.jsx";

ReactDOM.render(
    <App />,
    document.getElementById("root2")
);

index.html:

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>webpack 2 demo</title>
</head>

<body>
    <div id="root2">
    </div>
</body>

</html>

我尝试使用启用了 HMR 的 webpack-dev-server 来运行 Project2，但它在 Google Chrome 控制台中出现错误:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

软件包的当前版本:

"react": "^15.4.2" "webpack": "^2.2.1", "webpack-dev-server": "^2.4.2", "babel-core": "^6.24.0"

我是否以错误的方式进行导入？还是导出有问题？请帮忙。

编辑:作为 Joe Clay suggested 为 Project1 添加 webpack.config.js :

const webpack = require('webpack');
const path = require('path');
module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    libraryTarget: 'umd',
    library: 'Hello'
  },
  devtool: 'eval-source-map',
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.ProvidePlugin({
      React: 'react'
    })
  ],
};

最佳答案

为了做到这一点，您需要更新您的 webpack 配置以输出可以导出的包。

您的配置需要包含这些行

{
    output: {
        libraryTarget: 'umd', // make the bundle export
        externals: {
            'react': { // import react from an external module so you don't have multiple instances
                'commonjs': 'react', 
                'amd': 'react'
             },
            'react-dom': { // some versions of react had links to react-dom so its good to include this
                'commonjs': 'react-dom',
                'amd': 'react-dom'
            }
        }
    }
}

需要注意的是，如果您在项目中使用 create-react-app，则需要弹出子项目来更改配置

关于reactjs - 如何导入在 webpack 中创建的包？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42949247/

25

4

0

文章推荐： reactjs - React Flow 可能使用 document.body.classList.add 为 null 值

文章推荐： sql - SQL*Plus 中的丑陋格式

文章推荐： django - Django模型表格-设置必填字段

文章推荐： reactjs - React PropTypes arrayOf oneOf 形状 A 或形状 B

objective-c - 以编程方式制作 mac 包/包
通过终端，您可以使用命令 - “SetFile -a B 文件名” 以编程方式，我认为我应该通过[[NSFileManager defaultManager] createDirectoryAtPat
r - 包 igraph0 已弃用，因此无法访问 gspan 包
嗨，正在尝试书中的一些示例:Practical Graph mining with R对于子图挖掘: library(subgraphMining) library(igraph) graph1 =
java - 具有默认(包)访问级别的类中方法的默认(包)和公共(public)访问级别之间有什么区别吗？
代码中的相同问题: class Foo { int getIntProperty () { ... } CustomObject getObjectProperty () { ... }
javascript - react | Npm 包 - 如何导出 2 个组件以用作 npm 包
所以这可能是一个愚蠢的问题，但它已经困扰我一段时间了。使用 React，我创建了两个组件(Buttons.js 和 Message.js)，每个组件都有一个导出。但是，现在我希望将这两个组件用作 n
node.js - 无法在某个范围内安装 NPM 包，或者无法在范围内安装 NPM 包(或者看起来像这样)
从今天早上开始，我发现我无法再从某个范围安装任何 NPM 包(或任何具有依赖项的包)。例如，如果我输入 npm i webpack 我会收到以下错误... npm ERR! code E401 npm
angular - 找不到本地 "typescript"包。 "@ngtools/webpack"包 Angular 2
我在这里搜索过，Angular 2, @ngtools/webpack, AOT ，但对我不起作用。我运行了 npm install 命令。我正在做的是创建一个新的 Angular 2 项目。当我运行
swift - 集成具有本地 Swift 包 : how to avoid invalidManifestFormat errors? 的远程 Swift 包
情况: 我有一个 Swift 包，将其命名为 lib。 lib 位于其自己的存储库中。在lib的仓库中，有一堆本地包；也就是说，这些包是在 lib 中定义的，使用本地路径依赖格式 .package(p
node.js - 如何安装完整的 Node JS 包，从而避免使用 npm 来安装模块/包？
我想在工作中学习和使用nodejs，但是在使用 de npm 命令安装模块/包时遇到网络问题。我是否可以使用我的家用计算机构建完整的 Node js 包，然后将其安装在另一台计算机(我的工作场所计算机
python - 如何将非 Python 包 (.tar.bz2) 安装/转换为 Anaconda 包？
我需要将一些 .tar.bz2 格式的非 Python 包转换为 Anaconda/miniConda .egg 文件并安装它们。为此，我需要一个适用于 Windows 的 bld.bat 文件。互联
c++ - thrift-0.9.3 包 C++ 构建问题。使用哪些 boost 包？
我需要共享库文件 libthrift-0.9.3.so 作为其他包的依赖项。我在构建 thrift-0.9.3 包时看到编译问题(我确实从 https://thrift.apache.org/down
r - 在 R 版本 3.5.0 中安装 arcgisbinding 包，收到警告 : as ‘lib’ is unspecified, 包 ‘‘arcgisbinding’ 不可用
我尝试在 R 版本 3.5.0 中安装“arcgisbinding”包。但是我失败了，得到以下错误和警告。 Installing package into ‘C:/Users/Lenovo/Docum
r - 在 R 版本 3.5.0 中安装 arcgisbinding 包，收到警告 : as ‘lib’ is unspecified, 包 ‘‘arcgisbinding’ 不可用
我尝试在 R 版本 3.5.0 中安装“arcgisbinding”包。但是我失败了，得到以下错误和警告。 Installing package into ‘C:/Users/Lenovo/Docum
android - "The name ' 页 ' is defined in the libraries ' 包 :burn_off/widgets/page. Dart ' and ' 包 :flutter/src/widgets/navigator. Dart '
我试图在 flutter 中测试这个应用程序，但我无法运行该应用程序，因为出现此错误“名称‘Page’在库‘package:burn_off/widgets/page.dart’和‘package’中
包/模块之间的python变量共享
试图理解和学习如何编写包...用我一直使用的东西进行测试，记录... 您能帮我理解为什么“日志”变量不起作用...并且屏幕上没有日志记录吗？谢谢! 主要文件: #!/opt/local/bin/py
Python 包
我尝试运行此使用 Google 云的代码。 import signal import sys from google.cloud import language, exceptions # creat
用于分析眼动追踪数据的 R 包
我想知道是否有人找到了一个很好的 R 包来分析眼动追踪数据？我遇到了 eyetrackR，但据我所知，没有可用的英文支持文档: http://read.psych.uni-potsdam.de/pm
R 包 - 我可以在包中使用全局变量吗？
我正在 R 上制作一个包。我有两个函数共享一个变量(全局)。如何将其导入到包中？例如， m<-0 f<-function() { m <- m+1 } g<-function() { m <- m
包含子包的 Lua 包
我用 C 为 Lua 编写了很多模块。每个模块都包含一个 Lua 用户数据类型，我像这样加载和使用它们: A = require("A") B = require("B") a = A.new(3,{
rubuntu xlsx 包
我正在尝试在 R 中的 Ubuntu 上安装 xlsx 包，以便使用允许在 R 中插入链接然后将它们导出到 Excel 的功能。话虽如此，我根本无法安装该软件包。显然它必须与 rJava 一起使用
用于从标准概率分布中采样的 Haskell 包
我想在 Haskell 中做一些蒙特卡洛分析。我希望能够编写这样的代码: do n <- poisson lambda xs <- replicateM n $ normal mu sigma

首页

博学

6Ren·AI

商城

reactjs - 如何导入在 webpack 中创建的包？