Question

我正在使用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"]
    }
};

我使用Hot模块替换，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
    }
}

Modal和ModalHeader都是标准的React组件，它们作为模块的默认值导出。我已经尝试将它们转换为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。

TypeScript + Webpack 2 - 导入的模块不会以捆绑形式显示

0 个答案: