NPM + React + TypeScript 与 AMD 模块

Question

我正在尝试为使用 react 用 typescript 编写的应用程序设置开发环境。 我确实有可以编译为 ES5 和 AMD 模块的现有 typescript 代码。

我想避免在浏览器中进行任何 js 转换。请注意，我不需要使用 babel 来转译 jsx，因为 typescript 会将标签编译到 tsx 文件中的 React.createElement 中。

我照常做：

npm install react -save
npm install react-dom -save

npm install typescript -save-dev
npm install typings -save-dev

typings install react --ambient --save
typings install react-dom --ambient --save

现在，我有两个问题：

1. 如何在我的 tsx 文件中正确导入/要求 react 和 react-dom 编译为 ES5/AMD？

   目前我只是这样做：

   /// <reference path="../../typings/browser/ambient/react-dom/index.d.ts" />
   /// <reference path="../../typings/browser/ambient/react/index.d.ts" />
   
   export class MyComponent extends __React.Component<any, {}> {    
     public render() {
       return (
         <h1>MyCompoentnt</h1>
       );
     }
   }
   

   但是编译失败并出现错误 TS2304: Cannot find name 'React'。

2. 如何在我的应用程序中包含 react.js 和 react-dom.js？ 我想需要一些转译或浏览器化。还是我应该和他们一起去 index.html？

   <script src="scripts/react.js"></script>
   <script src="scripts/react-dom.js"></script>
   <script src="scripts/require.min.js" data-main="scripts/app"></script>
   

这是我的 package.json：

{
  "name": "myhtmlapp",
  "version": "1.0.0",
  "description": "react test app",
  "main": "index.js",
  "dependencies": {
    "jquery": "^2.2.3",
    "react": "^15.0.0",
    "react-dom": "^15.0.0"
  },
  "devDependencies": {
    "browser-sync": "^2.11.2",
    "typescript": "^1.8.9",
    "typings": "^0.7.12"
  },
  "scripts": {
    "watch:typescript": "tsc --p ./appscripts -w",
    "watch:css": "browser-sync start --server --files .wwwroot/css/*.css",
    "compile": "tsc --p ./appscripts",
    "test": "echo \"Error: no test specified\" "
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

这是整个应用程序：https://onedrive.live.com/redir?resid=51A46BBA4E9EF07E!263323&authkey=!AKQ6FqjE2W2YVBo&ithint=file%2czip

Answer 1

我很确定有几种方法可以做到这一点。下面我发布了我的方法，让你提到的东西一起玩：

1. 要导入反应，我使用标准 import，如下所示：

   import * as React from 'react';
   import * as ReactDOM from 'react-dom';
   
   export class MyComponent extends React.Component<any, any>
   {
       //...
   }
   

2. 为了“包含”对应用程序的反应，我使用 systemjs 作为模块加载器（由于某些原因超出了我不能使用 browserify 的问题，但很确定它可以用来做同样的事情）。您需要通过 npm 安装 systemjs。然后指示它知道在哪里寻找反应。为此，请将以下脚本放入您的 index.html：

   <script src="systemjs/dist/system.src.js"></script>
   
   <script>
       System.config({
           baseURL: './lib',
           paths: {
               "react*": 'react/dist/react-with-addons'
           }             
       });
   
       System.defaultJSExtensions = true;
   </script>
   

   其中react/dist/react-with-addons 是react-with-addons.js 的dist 的路径（没有'.js' 扩展名）。还有systemjs/dist/system.src.js - systemjs dist 的路径。

希望这会有所帮助。