Webpack + TypeScript + 模块加载

Question

基本上，模块加载现在 JavaScript 很痛苦叹息...

所以我有一个 TypeScript 应用程序，我想用 webpack 编译它。问题是我的编辑器 (vscode) 似乎期望导入的模块没有扩展名。例如：

import {IServer} from "../server/server";

在 webpack 中，如果我包含一个扩展，我只能让它工作。如果我包含一个扩展（即“../server/server.ts”），它会在 webpack 中构建，但编辑器无法识别它并抛出找不到模块的错误。如果我省略扩展名（即“../server/server”），webpack 不会加载它（它说它找不到模块“../server/server")，但编辑器会出于代码完成等目的加载它。

这让我相信在 TypeScript 中导入模块应该不需要扩展，而在 webpack 生态系统中，它们是必需的（这与加载器的工作方式等相关）。

这让我觉得很糟糕。我的问题是：我的结论正确吗？我必须在构建系统或编辑器之间进行权衡吗？或者我错过了什么？是否可以让 webpack typescript 加载器静默添加扩展，以便 webpack 在构建期间正确识别模块？

我有以下 webpack.config.js 文件：

module.exports = [
    {
        name: "Server",
        entry: "./src/server/server.ts",
        output: {
            filename: "./server/server.js"
        },
        target: "node",
        resolve: [".ts", ".js"],
        module: {
            loaders: [
                { test: /\.ts$/, loader: 'ts-loader' }
            ]
        }
    },
    {
        name: "Client",
        entry: "./src/client/scripts/client.ts",
        output: {
            filename: "./public/scripts/client.js"
        },
        resolve: ["", ".ts", ".js", ".less"],
        module: {
            loaders: [
                { test: /\.ts$/, loader: 'ts-loader' },
                { test: /\.less$/, loader: "style!css!less" },
                { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
                { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },
                { test: /\.png$/, loader: "url-loader?mimetype=image/png" }
            ]
        }
    }
];

以及以下 tsconfig 文件：

{
    "compilerOptions": {
        "target": "ES5",
        "module": "commonjs",
        "jsx": "react"
    },

    "files": [
        "src/shared/typings/tsd.d.ts",
        "src/shared/typings/webpack.d.ts"
    ]
}

我在节点中使用了以下包：

"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"css-loader": "^0.23.0",
"file-loader": "^0.8.5",
"less": "^2.5.3",
"less-loader": "^2.2.1",
"react-hot-loader": "^1.3.0",
"style-loader": "^0.13.0",
"ts-loader": "^0.7.1",
"typescript": "^1.6.2",
"url-loader": "^0.5.7",
"webpack-dev-server": "^1.12.1",
"moment": "^2.10.6"

Answer 1

in webpack, I can only get this to work if I include an extension.

绝对不需要。

whereas in the webpack ecosystem, they are required

又不是。它们不是必需的。

entry: "./src/server/server.ts",

这应该是entry: "./src/server/server"。还要查看广泛的测试列表 https://github.com/TypeStrong/ts-loader/tree/master/test

Answer 2

is my conclusion correct

没有。绝对不应该有扩展名。

修复

resolve: [".ts", ".js"],

应该是：

resolve: {
    extensions: ['.ts', '.js']
},

如有疑问，请检查测试：https://github.com/TypeStrong/ts-loader/tree/master/test

Answer 3

我克服了所有的编译问题并在这里创建了一个项目模板，https://github.com/c9s/ts-webpack

您只需克隆项目即可开始，而无需与配置文件作斗争...

Webpack + TypeScript + 模块加载

Webpack + TypeScript + Module Loading

node.js

typescript

webpack

修复