Question

我尝试更新我的webpack + js + react-HelloWorld webapp（运行正常）使用Typescript而不是webpack's intro，但我的编辑器找不到react模块（在package.json中定义）我跑了“npm install”）。所以bundle.js文件被加载了，不应该将打字稿编译成那个吗？

的src / index.tsx：

import * as React from "react";
import { render } from "react-dom";

const App = () => (<div>Hello React with Typescript</div>);

function createAppParent() {
  let element = document.createElement('div');
  document.body.appendChild(element);

  return element;
}

render((
    <App />
), createAppParent());

的package.json：

{
  "name": "hello_world_ts",
  "version": "1.0.0",
  "description": "minimal configuration of webpack react and sass using typescript",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
  },
  "keywords": [],
  "author": "me",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.17",
    "html-webpack-plugin": "^2.30.1",
    "ts-loader": "^3.5.0",
    "typescript": "^2.7.1",
    "uglifyjs-webpack-plugin": "^1.1.6",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.11.1",
    "webpack-merge": "^4.1.1"
  },
  "dependencies": {
    "@types/react": "^16.0.38",
    "@types/react-dom": "^16.0.4",
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  }
}

tsconfig.json：

{
    "compilerOptions": {
      "outDir": "./dist/",
      "sourceMap": true,
      "noImplicitAny": true,
      "module": "es6",
      "target": "es2017",
      "jsx": "react",
      "allowJs": true
    },
    "exclude": [
      "node_modules",
      "dist"
    ],
    "include": [
        "./src/**/*"
    ]
}

webpack.common.json：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: './src/index.tsx',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx|ts|tsx)$/,
                exclude: /node_modules/,
                use: [
                    'ts-loader'
                ],
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'Hello React+Typescript',
        })
    ]
};

webpack.dev.json：

const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist'
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('development')
        })
    ]
});

webpack.prod.json：

const webpack = require('webpack');
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    devtool: 'source-map',
    plugins: [
        new UglifyJSPlugin({
            sourceMap: true
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        })
    ]
});

那么缺少什么？

更新我使用Visual Studio Code显示消息“[ts]找不到模块'反应'”，但它不仅仅是编辑器。在' npm start '启动devServer之后，我在firefox控制台中找到了“找不到react模块”的内容。

那么为什么现在一切都在运转，一天之后呢？（修辞问题）编译器和开发服务器输出中的错误没有问题。我知道重装有时可以帮助IDE而且还有npm？奇怪的东西，但没有问题留下来解决。

Answer 1

您可以尝试添加

"target": "ES6"
"module": "commonjs",
"moduleResolution": "node",
"baseUrl": "src",
"typeRoots": ["node_modules/@types"]

到compilerOptions

Answer 2

问题在计算机重启时因未知原因消失了。（这个答案是将问题标记为已回答。）

“[ts]无法找到模块'反应'”尽管“npm install”

2 个答案: