Question

所以让我开始说我对WebPack和React相当新，但我有一些基本的工作（至少它在浏览器中工作）。我是一个好的C＃开发人员，所以想要使用Visual Studio作为我的首选编辑器。我创建了一个相当简单的webpack设置并创建了一个虚拟解决方案文件（Visual Studio 2015 update 3），我从文件系统创建了一个网站。

我有一个工作（在浏览器中）Webpack + TypeScript + React + Babel设置，正如我所说的在浏览器中着名。它主要基于使用带反射https://www.typescriptlang.org/docs/handbook/react-&-webpack.html

的TypeScript的官方指南

我已经按照该教程的说法，即使它在浏览器中运行也很好，也会遇到与我更丰富的webpack设置相同的问题。

那究竟是什么问题？ 主要问题是我的设置似乎没有将“React”识别为TSX文件中的有效模块导入（即使浏览器中的一切都很好）。

我已经阅读了很多帖子，讨论了不同的Webpack设置，以及我头脑旋转的tsconfig.json设置。

我认为向您展示我的一些文件可能会更好，看看是否有人知道如何解决我的问题

.babelrc

{ "presets": ["es2015"] }

package.json （我正在使用NPM）

{
  "name": "task1webpackconfig",
  "version": "1.0.0",
  "description": "webpack 2 + TypeScript 2 + Babel example",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/sachabarber/MadCapIdea.git"
  },
  "keywords": [
    "babel",
    "typescript",
    "webpack",
    "bundling",
    "javascript",
    "npm"
  ],
  "author": "sacha barber",
  "homepage": "https://github.com/sachabarber/MadCapIdea#readme",
  "dependencies": {
    "@types/react": "^15.0.23",
    "@types/react-dom": "^15.5.0",
    "lodash": "^4.17.4",
    "react": "^15.5.4",
    "react-dom": "^15.5.4"
  },
  "devDependencies": {
    "@types/lodash": "^4.14.63",
    "@types/react": "^15.0.23",
    "@types/react-dom": "^15.5.0",
    "awesome-typescript-loader": "^3.1.3",
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2015-native-modules": "^6.9.4",
    "source-map-loader": "^0.2.1",
    "typescript": "^2.3.2",
    "webpack": "^2.4.1"
  }
}

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使用）
我的代码的源地图

所以这告诉我webpack / browser可以加载 React 模块正常工作。

但是当我尝试编辑TSX（打字稿JSX文件）时，我看到了这个

Typescript 100％适用于我自己的文件，似乎无法看到 React 的东西。

就像我说我已经尝试了很多建议的修复而且没有一个有效，请帮助我一个人

未找到WebPack TypeScript React模块

0 个答案: