如何导入在webpack中创建的包?

用户名

我有一个通过webpack捆绑在一起Project1我的要求是将此bundle.js放在CDN上,以便可以在Project2中使用在Project 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的包,并出于演示目的,而不是将其添加到CDN中,而只是复制了这个bundle.js(与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控制台中出现错误:

警告:React.createElement:类型无效-预期为字符串(对于内置组件)或类/函数(对于复合组件),但得到了:对象。

未捕获的错误:元素类型无效:预期为字符串(对于内置组件)或类/函数(对于复合组件),但得到了:对象。

  • 软件包的当前版本:

“反应”:“ ^ 15.4.2”“ webpack”:“ ^ 2.2.1”,“ webpack-dev-server”:“ ^ 2.4.2”,“ babel-core”:“ ^ 6.24.0”

我是否以错误的方式进行导入?还是在Export中出了点问题?请帮忙。

编辑:按照Joe Clay的建议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'
    })
  ],
};
尤里·塔拉班波(Yury Tarabanko)

尝试

import {Hello} from "./bundle.js";

您没有Hello默认导出

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章