ReactJS with Typescript - 无法找到变量：require

Question

美好的一天，

我正在尝试将ReactJS与Typescript一起使用。一切看起来都不错，但在启动应用程序后出现错误：＆＃34;无法找到变量：require＆＃34;

我不使用node.js进行服务器端渲染。

脚本：

/// <reference path="../typings/tsd.d.ts"/>

import * as React from 'react'
import * as ReactDom from 'react-dom'

interface Props {}
interface State {}

export class App extends React.Component<Props, State>{

    render(){
      return (<div>Hello</div>);
    }
}

ReactDom.render(<App/>, document.getElementById("content"));

并编译了boot.js：

"use strict";
var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var React = require('react');
var ReactDom = require('react-dom');
var App = (function (_super) {
    __extends(App, _super);
    function App() {
        _super.apply(this, arguments);
    }
    App.prototype.render = function () {
        return (React.createElement("div", null, "Ahoj"));
    };
    return App;
}(React.Component));
exports.App = App;
ReactDom.render(React.createElement(App, null), document.getElementById("content"));

错误：

Answer 1

您需要解决模块问题。 $.getScript("../DateRangePicker/daterangepicker.js", function () { $('input[name="ctl00$PageContent$mydaterange"]').daterangepicker({ "linkedCalendars": false, "locale": { "format": "MM/DD/YY", "separator": " - ", "applyLabel": "Apply", "cancelLabel": "Cancel", "fromLabel": "From", "toLabel": "To", "customRangeLabel": "Custom", "daysOfWeek": [ "Su", "Mo", 是将模块加载到代码中的一种形式。它通常与NodeJS一起使用。如果您想在浏览器中使用它，请尝试Microsoft MSDN on Training and Testing Sets

Answer 2

浏览器不支持

require。您将需要一个模块加载器。我推荐使用webpack，这是一个浏览器快速入门：https://basarat.gitbooks.io/typescript/content/docs/quick/browser.html