【发布时间】：2016-02-26 14:39:49
【问题描述】：
基本上，模块加载现在是 JavaScript 的一大难题sigh...
所以我有一个我想用 webpack 编译的 TypeScript 应用程序。问题是我的编辑器 (vscode) 似乎期望导入的模块 没有 扩展。例如：
import {IServer} from "../server/server";
在 webpack 中，如果我包含扩展，我只能让它工作。如果我包含一个扩展名（即“../server/server.ts”），它会在 webpack 中构建，但编辑器无法识别它并抛出一个找不到模块的错误。如果我省略了扩展名（即“../server/server”），webpack 不会加载它（它说它找不到模块“../server/server”），但编辑器会出于代码完成等目的加载它。
这让我相信，在 TypeScript 中导入模块预计不需要扩展，而在 webpack 生态系统中，它们是必需的（这与加载器的工作方式等有关）。
这在我的嘴里留下了非常糟糕的味道。我的问题是：我的结论正确吗？我必须在构建系统或编辑器之间进行权衡吗？还是我错过了什么？是否可以让 webpack 打字稿加载器静默添加扩展，以便 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"
【问题讨论】：
-
我意识到这可能不是很有帮助，但是 SystemJS 处理得非常优雅。到目前为止，我的体验非常棒，它支持我所知道的大多数 Webpack 功能。
-
我正在研究所有主流的模块加载/构建系统，以自己决定我更喜欢哪些。 SystemJS（通过 JSPM）相当不错，但我对没有 HTTP2 的它的性能印象不深。我有一个大型 TS 应用程序，我要在所有这些应用程序之间移植，并且在运行时加载所有模块时性能很差。 Webpack 似乎快得多；但这个问题难倒我。没有扩展的模块在 RequireJS、JSPM 和 browserify 上运行良好，难道没有办法在不重写我所有导入的情况下使用 webpack 做到这一点吗？
-
我很好奇您的应用中有多少文件/模块。我发现性能不错，但我的应用程序只有几百个文件 ts 文件，每个文件大约 20 到 40 loc。
-
这很奇怪。我只是在加载反应时遇到了性能问题。即使我注入 react/lodash/所有其他供应商库，加载核心运行时模块仍然需要大约半秒到一秒。它发出的请求数量非常惊人。
标签： node.js typescript webpack