我正在使用TS 2.3.x和Webpack 2.x - 这是一个电子项目,我正在慢慢地从JS转换为TS .

我的webpack配置的要点是

module.exports = {
    output: {
        path: path.join(__dirname, "../build"),
        filename: "bundle.js",
        libraryTarget: "commonjs2"
    },
    module: {
        rules: [
            {
                test: /\.(tsx?)$/,
                use: ["awesome-typescript-loader"],
                exclude: [/node_modules/]
            },
            {
                test: /\.(js)$/,
                use: ["babel-loader"],
                exclude: [/node_modules/]
            }
        ]
    },
    resolve: {
        extensions: [".js", ".ts", ".tsx", ".json"]
    }
};

我正在使用热模块替换, LoaderOptionsPlugin({ debug: true }) 和命名模块插件,但这些都不会影响捆绑输出导致我看到的问题 .

对于Awesome Typescript Loader,我正在使用

{ 
    "babelOptions": {},
    "transpileOnly": true,
    "useBabel": true,
    "useCache": false
}

看到这里获取信息:https://github.com/s-panferov/awesome-typescript-loader#loader-options

问题是我有类似的TypeScript模块

// settings-modal.tsx
import * as React from "react";

...

import Modal from "../base/modal";
import ModalHeader from "../base/modal-header";

class SettingsModal extends React.Component<any, any> {
    ...

    render() {
        // I use both Modal and ModalHeader here
    }
}

ModalModalHeader 都是标准的React组件,默认为're exported as the module' . 我已经尝试将它们转换为TS,但是捆绑包中仍然缺少导入 .

但是当编译bundle时,输出看起来像

...

var React = __webpack_require__("../node_modules/react/react.js");
var modal_1 = __webpack_require__("./ui/components/base/modal.js");

var SettingsModal = function (_super) {
    __extends(SettingsModal, _super);

    function SettingsModal() {
       ...
    }

    SettingsModal.prototype.render = function() {
        return React.createElement(modal_1.default, {...}, React.createElement(modal_header_1.default, ...));
    }
}

...

注意未导入 modal-header ,但引用了 modal_header_1 .