添加对打字稿项目的反应

Question

我目前正在尝试将reactJS添加到我的webapp项目中，但是我遇到了一些困难。

首先，您现在应该：

• 我正在使用TypeScript（v2.9）开发该项目，并且我的所有文件都在使用内部模块，因此我无法使用import * as React from 'react'，因为它将破坏我所有的内部模块...要添加新的外部模块，我使用.d.ts文件并添加一个包含我要使用的脚本的<script>栏杆。

• 我使用Grunt作为任务管理器，并使用grunt-ts来编译我的打字稿文件。

这是项目的结构：

Project
|
+-- Gruntfile.js
|   
+-- package.json
|    
+-- node_modules
|    
+-- public
|  |  
|  +-- webapp
|     |
|     +-- scripts 
|

文件夹脚本包含我的所有键入内容以及我导入或下载的库（例如jQuery），并且这些库运行良好。

到目前为止我尝试过的事情：

1. 我在scripts文件夹中添加了一个新的package.json，以便可以将所有键入内容放在同一位置（一个是我自己输入的，另一个是通过npm可用的）。我还通过npm添加了react模块。 此时一切都很好，我的咕gr声继续出现，没有错误。但是，当我加载页面时，出现了require is not defined错误。

经过一些研究，我发现我需要浏览我的node_modules文件，以便可以在浏览器中使用它们。我在此配置中使用了grunt-browserify：

build: {
  files: [
  {
     src: [],
     dest : 'public/webapp/script/lib/bundle.js',
  }],
  options: {
     require: ['react'],
     browserifyOptions: {
     plugin: [
        ['tsify', {target: 'es2015'}]
     ],
     },
  }
}

这样做之后，关于require的错误消失了，但是现在还没有定义React模块。好像bundle.js中的代码没有很好地导入。