下面是刚开始的webpack的配置文件

var path = require(‘path‘);
var webpack = require(‘webpack‘);
var OpenBrowserPlugin = require(‘open-browser-webpack-plugin‘);
var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
var application ={
    port:3002,
    entry:‘./application/index.tsx‘,
    outputFile: ‘app.js‘,
    outputDir: ‘dist‘,
    template: ‘application/index.html‘
};
module.exports = {
    entry: application.entry,
    devtool: "source-map",
    output: {
        filename: application.outputFile,
        path: path.resolve(__dirname, application.outputDir),
    },
    resolve: {
        extensions: [" " , ".ts", ".tsx", ".js", ".json"]
    },
    module: {
        rules: [
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
        ]
    },
    devServer: {
        contentBase:path.resolve(__dirname, application.outputDir),
        historyApiFallback: true,
        port: application.port,
        inline: true,
        hot: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            filename: ‘index.html‘,
            template: application.template
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery",
            React:‘react‘
        }),
        new OpenBrowserPlugin({url: ‘http://localhost:‘+ application.port})
    ]
};

写出的入口文件代码是:

import * as React from "react";
import * as ReactDOM from "react-dom";

console.dir($)
ReactDOM.render(
    <h2>hhh</h2>,
    document.getElementById("app")
);

当时老是报错:

Error:(4, 13) TS2304:Cannot find name ‘$‘.

Error:(4, 13) TS2304:Cannot find name ‘jQuery‘.

后来才发现是 npm install --save-dev @types/juqery 的问题

后来想把React在ProvidePlugin当成全局变量,以后就不用再ts文件中import了,

但是报错:

Error:(7, 6) TS2686:‘React‘ refers to a UMD global, but the current file is a module. Consider adding an import instead.

我直接写jsx文件如下:

var React = require("react");

var ReactDOM = require("react-dom");
console.dir(jQuery);
ReactDOM.render(React.createElement("h2", null, "hhh"), document.getElementById("app"));

没问题,

var ReactDOM = require("react-dom");
console.dir(jQuery);
ReactDOM.render(React.createElement("h2", null, "hhh"), document.getElementById("app"));

没问题

我大概明白了,

因为是在React中写的<h2>hhh</h2>是需要编译成React.createElement("h2", null, "hhh") ,所以在TSX文件中需要import React

为什么webpack.ProvidePlugin没有生效呢 , 其实生效了,在编译后的jsx文件中生效了.

所以

那我可以这样写吗

import * as ReactDOM from "react-dom";
ReactDOM.render(
    React.createElement("h2", null, "hhh"),
    document.getElementById("app")
);

发现又报错了.

囧

所以

用TS写React就别想不import React ! 就酱

用TypeScript写前端React遇到的问题,未解决