Node.js 网页包+；打字脚本+；模块加载

基本上，模块加载现在是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"
    ]
}

我在node中使用以下包：

"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"

在webpack中，我只能在包含扩展的情况下才能使其工作

绝对不需要

而在网页包生态系统中，它们是必需的

再也没有了。它们不是必需的

条目：“./src/server/server.ts”

这应该是

条目：“./src/server/server”

。还要检查大量的测试列表

我的结论正确吗

不，分机绝对不应该在那里

修理

resolve:[“.ts”、“.js”]，

应该是：

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

---

如果有疑问，请检查测试：

我克服了所有编译问题，在这里创建了一个项目模板

---

您只需克隆项目即可启动，而无需与配置文件发生冲突

我意识到这可能不是很有帮助，但是SystemJS非常优雅地处理了这个问题。到目前为止，我有一个很好的经验，它支持我所知道的大多数网页功能。我正在浏览所有主流模块加载/构建系统，以决定我更喜欢哪一个。SystemJS（通过JSPM）相当不错，但我对它在没有HTTP2的情况下的性能印象不深。我有一个很大的TS应用程序，我正在它们之间移植，在运行时加载所有模块时，我的性能非常差。网页包似乎要快得多；但这个问题困扰着我。没有扩展名的模块在RequireJS、JSPM和browserify上运行得很好，难道没有一种方法可以在不重新编写所有导入内容的情况下使用webpack做到这一点吗？我很好奇你的应用程序中大约有多少文件/模块。我发现它的性能还不错，但我的应用程序只有几百个文件，每个文件大约20到40个位置。这很奇怪。我在加载时遇到性能问题。即使在我注入react/lodash/所有其他供应商lib时，仅加载核心运行时模块仍然需要大约半秒到一秒的时间。它发出的请求数量太多了，我接受这个答案是因为在查看所有这些示例时，我注意到我做错了一些事情：我的“resolve”配置应该是一个具有“extensions”属性的对象。通过解决这个问题，我现在可以导入而无需扩展。谢谢现在我觉得自己很笨。。。