使用Typescript和WebPack呈现反应组件的错误

我正在尝试构建最简单的反应组件。它只是呈现一个Hello页面，但我在我的控制台中得到一个错误。我使用打字稿作为我的编译器。我试图按照本指南以获取设置为我的项目：https://github.com/Microsoft/TypeScript-React-Starter 使用Typescript和WebPack呈现反应组件的错误

错误

Uncaught ReferenceError: React is not defined 
    at Object.<anonymous> (external "React":1) 
    at __webpack_require__ (bootstrap 2fd03459d628585593a4:19) 
    at Object.module.exports (index.tsx:1) 
    at __webpack_require__ (bootstrap 2fd03459d628585593a4:19) 
    at Object.<anonymous> (bundle.js:3669) 
    at __webpack_require__ (bootstrap 2fd03459d628585593a4:19) 
    at module.exports.ctor.super_ (bootstrap 2fd03459d628585593a4:62) 
    at bootstrap 2fd03459d628585593a4:62

这里是我的WebPack配置：

module.exports = { 
    entry: "./src/index.tsx", 
    output: { 
     filename: "bundle.js", 
     path: __dirname + "/dist", 
     publicPath: "/dist/" 
    }, 

    // Enable sourcemaps for debugging webpack's output. 
    devtool: "source-map", 

    devServer: { 
     headers: { 
      'Access-Control-Allow-Origin': '*' 
     }, 
     port: 8282 
    }, 

    resolve: { 
     // Add '.ts' and '.tsx' as resolvable extensions. 
     extensions: [".ts", ".tsx", ".js", ".json"] 
    }, 

    module: { 
     rules: [ 
      // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'. 
      { test: /\.tsx?$/, loader: "awesome-typescript-loader" }, 

      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'. 
      { enforce: "pre", test: /\.js$/, loader: "source-map-loader" } 
     ] 
    }, 

    // When importing a module whose path matches one of the following, just 
    // assume a corresponding global variable exists and use that instead. 
    // This is important because it allows us to avoid bundling all of our 
    // dependencies, which allows browsers to cache those libraries between builds. 
    externals: { 
     "react": "React", 
     "react-dom": "ReactDOM" 
    }, 
};

这里是myindex.tsx

import * as React from "react"; 
import * as ReactDOM from "react-dom"; 

import { Hello } from "./components/Hello"; 

ReactDOM.render(
    <Hello compiler="TypeScript" framework="React" />, 
    document.getElementById("example") 
);

这里是我的你好组件

import * as React from "react"; 

export interface HelloProps { compiler: string; framework: string; } 

// 'HelloProps' describes the shape of props. 
// State is never set so we use the 'undefined' type. 
export class Hello extends React.Component<HelloProps, undefined> { 
    componentWillMount() { 
     if ('pluginLoaded' in window) { 
      (window as any).pluginLoaded('hello', function (port: any, context: any) { 
       // Future work should interact with the message channel here 
      }); 
     } 
    } 

    render() { 
     return <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>; 
    } 
}

来源

2017-09-25 vanegeek

您将react和react-dom定义为Externals。正如你在你的webpack配置中对external选项的评论中所写的那样，预计对应的全局变量存在。

您必须在HTML中包含React版本。通过在HTML中包含以下脚本，可以从CDN使用React。

<script crossorigin src="https://unpkg.com/[email protected]/dist/react.js"></script> 
<script crossorigin src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>

这是React的开发版本，如果你打算在生产中使用它，你应该使用缩小版本。欲了解更多详情，请参阅React - Using a CDN。

来源

2017-09-25 17:51:00

是的。你是对的。我刚刚评论了Webpack中的外部配置。如果我没有对它进行评论，我将不得不使用脚本标记来包含它们，正如你所提到的那样。 – vanegeek

使用Typescript和WebPack呈现反应组件的错误

回答

相关问题