Reactjs 找不到网页包TypeScript响应模块

所以，让我开始说我对WebPack和React相当陌生，但我有一些基本的功能（至少它在浏览器中工作）。不过，我是一名ok C#开发人员，因此希望使用Visual Studio作为我的首选编辑器。我创建了一个相当简单的网页包设置，并创建了一个虚拟解决方案文件（VisualStudio2015更新3），其中我从文件系统创建了一个网站

我有一个工作（在浏览器中）的网页包+打字脚本+反应+巴别塔设置，正如我所说，它在浏览器中工作得非常好。它主要基于使用带有React的TypeScript的官方指南

我完全遵循了那个教程，尽管它在浏览器中运行得很好，但也遇到了与我的更丰富的网页设置相同的问题

那么到底是什么问题呢？ 主要问题是，我的设置似乎没有将“React”识别为TSX文件中的有效模块导入（即使浏览器中一切正常）

我读过很多关于不同的网页设置的帖子，还有让我头晕目眩的tsconfig.json设置

我想最好向您展示我的一些文件，看看是否有人知道如何解决我的问题

.babelrc

{ "presets": ["es2015"] }

package.json（我正在使用NPM）

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "Node",
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react"
  },
    "include": [
        "./src/**/*"
    ]
}

webpack.config.js

let _ = require('lodash');
let webpack = require('webpack');
let path = require('path');

let babelOptions = {
    "presets": ["es2015"]
};

function isVendor(module) {
    return module.context && module.context.indexOf('node_modules') !== -1;
}

let entries = {
    index: './index.tsx'
};

module.exports = {
    context: __dirname + '/src',
    entry: entries,
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },

    devServer: {
        open: true, // to open the local server in browser
        contentBase: __dirname,
    },

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

    resolve: {
        extensions: [".tsx", ".ts", ".js", ".jsx"],
        modules: [path.resolve(__dirname, "src"), "node_modules"]
        //modulesDirectories: ['src', 'node_modules'],
    },

    plugins: [
      new webpack.optimize.CommonsChunkPlugin({
          names: ['vendor'],
          minChunks: function (module, count) {
              // creates a common vendor js file for libraries in node_modules
              return isVendor(module);
          }
      }),
      new webpack.optimize.CommonsChunkPlugin({
          name: "commons",
          chunks: _.keys(entries),
          minChunks: function (module, count) {
              // creates a common vendor js file for libraries in node_modules
              return !isVendor(module) && count > 1;
          }
      })
    ],

    module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader' 1st 
            // then 'babel-loader'
            // NOTE : loaders run right to left (think of them as a cmd line pipe)
            {
                test: /\.ts(x?)$/,
                exclude: /node_modules/,
                use: [
                  {
                      loader: 'babel-loader',
                      options: babelOptions
                  },
                  {
                      loader: 'awesome-typescript-loader'
                  }
                ]
            },

            // All files with a '.js' extension will be handled by 'babel-loader'.
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                  {
                      loader: 'babel-loader',
                      options: babelOptions
                  }
                ]
            },

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

当我运行webpack时，一切似乎都很好

你们中的一些人可能想知道我的项目结构，它看起来像这样

让我向您展示一下，React/ReactDom的类型也存在

就像我说的，当我运行这个时，一切似乎都很好，我得到了我所期望的

工作网页

一组捆绑文件（Index.html使用）

我的代码的源代码映射

因此，这告诉我，React模块可以通过网页/浏览器加载，工作正常

但是当我尝试编辑TSX（typescript JSX文件）时，我看到了这一点

Typescript 100%用于我自己的文件，只是看不到React内容

---

就像我说我已经尝试了这么多建议的修复，但没有一个有效，请帮助我一些人

React&React依赖项和开发依赖项中都提到了Dom类型声明为什么会这样？嗯，就像我说的，我是新手，，这可能是问题所在吗？我认为这不会导致react导入失败，但要澄清的是，您只需要将typescript定义依赖项作为开发人员依赖项。您还需要将@types/lodash添加到您的开发依赖项中。在webpack.config.js中，尽管可以，但不需要指定“babel选项”，因为您已经声明了一个“.babelrc”文件。此外，您还需要安装“babel preset react”，并将其添加到您的.babelrc预设中，例如“presets”：[“es2015”，“react”]，Nick，我将在上午试一试，并报告结果

let _ = require('lodash');
let webpack = require('webpack');
let path = require('path');

let babelOptions = {
    "presets": ["es2015"]
};

function isVendor(module) {
    return module.context && module.context.indexOf('node_modules') !== -1;
}

let entries = {
    index: './index.tsx'
};

module.exports = {
    context: __dirname + '/src',
    entry: entries,
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },

    devServer: {
        open: true, // to open the local server in browser
        contentBase: __dirname,
    },

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

    resolve: {
        extensions: [".tsx", ".ts", ".js", ".jsx"],
        modules: [path.resolve(__dirname, "src"), "node_modules"]
        //modulesDirectories: ['src', 'node_modules'],
    },

    plugins: [
      new webpack.optimize.CommonsChunkPlugin({
          names: ['vendor'],
          minChunks: function (module, count) {
              // creates a common vendor js file for libraries in node_modules
              return isVendor(module);
          }
      }),
      new webpack.optimize.CommonsChunkPlugin({
          name: "commons",
          chunks: _.keys(entries),
          minChunks: function (module, count) {
              // creates a common vendor js file for libraries in node_modules
              return !isVendor(module) && count > 1;
          }
      })
    ],

    module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader' 1st 
            // then 'babel-loader'
            // NOTE : loaders run right to left (think of them as a cmd line pipe)
            {
                test: /\.ts(x?)$/,
                exclude: /node_modules/,
                use: [
                  {
                      loader: 'babel-loader',
                      options: babelOptions
                  },
                  {
                      loader: 'awesome-typescript-loader'
                  }
                ]
            },

            // All files with a '.js' extension will be handled by 'babel-loader'.
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                  {
                      loader: 'babel-loader',
                      options: babelOptions
                  }
                ]
            },

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