导入 Webpack 编译的 React 组件答案

【问题标题】：Importing Webpack-Compiled React Component导入 Webpack 编译的 React 组件
【发布时间】：2018-08-17 06:47:16
【问题描述】：

我正在使用由 webpack 转译的 create-react-app ReactJs 基本应用程序生成器和打字稿。

当我在 index.js 文件中导入 App.js 组件（已编译的 App.tsx 组件）时，我在浏览器中收到此错误：

事情是 webpack 没有抛出任何错误，所以我想问题是 reactjs 或 react-dev-server 不了解如何使用 webpack 编译文件格式解释组件。

这是我的 App.tsx、index.js 和 webpack.config.js 文件。

App.tsx

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './compiled/App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

webpack.config.js

const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = env => {

    const dev = env.NODE_ENV === 'dev'

    return 
    {
        mode: 'none',
        entry: "./client/src/App.tsx",
        output: {
            path: path.resolve(__dirname + '/client/src', 'compiled'),
            filename: 'App.js'
        },
        watch: dev,
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    use: 'ts-loader'
                },
                {
                    test: /\.tsx?$/,
                    enforce: 'pre',
                    loader: 'tslint-loader'
                }
            ]
        }
    }
}

【问题讨论】：

使用大量console.log() 和typeof() 在JS 中调试。很可能代码被转换为不是实际上是组件的东西，但是例如一些功能返回组件。要检查的一件事是您的模块导入对于转译的 TS 源是正确的。
您可能需要webpack.js.org/plugins/dll-plugin。 webpack 默认情况下不会从入口点导出任何内容。
@zerkms 这个插件似乎只用于速度性能？还是我理解错了
@user268396 实际上正如错误所解释的，它接收一个对象类型。如果它要接收一个函数，它就会起作用
@AriaGroult 你仍然可以试试这个或webpack.js.org/configuration/output/#output-library + webpack.js.org/configuration/output/#output-librarytarget

标签： javascript reactjs typescript webpack create-react-app

【解决方案1】：

终于发现这是我造成的，因为我使用了 create-react-app。而不是它，因为我使用的是 webpack，所以我使用 webpack-dev-server 来模仿 create-react-app 热重载服务器。

这就像一个魅力。

我的问题已经解决了。美好的一天，谢谢你

【讨论】：