使用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呈現反應組件的錯誤

回答

相關問題