导入路径不能以'.ts'结尾 - NodeJS和Visual Code

Question

我在尝试构建一个简单的NodeJS应用程序时遇到错误：

即使Visual Code提示错误，我的代码也运行了。当我从import语句中删除.ts扩展名时，我收到一个错误，指出找不到该文件。

我正在使用webpack，但这些文件来自服务器。这是我的文件夹结构：

这是我的webpack文件：

    define([
        "marionette",
        "core/GB.ini",
        "globalize",
        "localisation/localise",
        "bootstrap-dialog",
        "json!cldr-data/supplemental/likelySubtags.json",
        "json!cldr-data/supplemental/plurals.json",
        "json!cldr-data/supplemental/timeData.json",
        "json!cldr-data/supplemental/weekData.json",
        "json!localisation/messages/es.json",
        "globalize/number",
        "globalize/message",
        "globalize/plural",
        "modernizr",
        "smoothscroll",
    ],
        function (Marionette, AppIni, Globalize, Localise, Dialog, LikeSubtags, Plurals, TimeData, WeekData, Messages) {
            var GB = window.GB = new Marionette.Application();
            GB.User = {};
            GB.routers = {};

            Globalize.load(
                LikeSubtags,
                Plurals,
                TimeData,
                WeekData
            );
            Globalize.loadMessages(Messages);
            Globalize.locale("es");

            GB.Globalize = Globalize;
            GB.Localise = Localise;
            GB.Dialog = Dialog;

            GB.Model = Backbone.Model.extend({});
            GB.Collection = Backbone.Collection.extend({});

            GB.Views = {
                //if we do expand on these views they should probably get their own file.
                Item: Marionette.ItemView.extend({}), //for a single model
                Collection: Marionette.CollectionView.extend({}), //for a collection
                Composite: Marionette.CompositeView.extend({}), //for a combination of a model and a collection
                Layout: Marionette.LayoutView.extend({})
            };

            GB.session = new GB.Model();

            GB.getUrl = function () {
                return Backbone.history.location.origin + Backbone.history.location.pathname;
            }

            GB.getCurrentRoute = function () {
                return Backbone.history.fragment;
            };



            GB.on("before:start", function () {
                var RegionContainer = Marionette.LayoutView.extend({
                    el: "#app-container",

                    regions: {
                        header: "#header-wrapper",
                        main: "#main-region",
                        footer: "#footer-region",
                        dialog: "#dialog-region"
                    }
                });

                GB.regions = new RegionContainer();

            });

            GB.on("start", function () {
              require(["modules/header/header.module"], function () {
                    GB.Header.Controllers.Overview.show();
                });
              require(["modules/footer/footer.module"], function () {
                    GB.Footer.Controllers.Overview.show();
                });
                AppIni.start();
                Backbone.history.start();
                if (GB.getCurrentRoute() === "")
                    Backbone.history.navigate("#home", { trigger: true });
            });

            return GB;
        });

任何人都可以帮助我吗？ TKS！

Answer 1

这是我使用的，它运作良好。

完整的webpack配置在这里：https://gist.github.com/victorhazbun/8c97dc578ea14776facef09a115ae3ad

View Code

webpack.config.js

Answer 2

我不确定这个问题的确切解决方案是什么。显然，解决方案是remove the .ts extension — it is a configuration issue if it cannot find the file。对我来说，当我开始使用ts-loader时解决了配置问题。

Answer 3

我遇到了这个问题，我花了一个多小时才意识到我所要做的就是从导入中删除 .ts 扩展名。对我来说：

 // index.ts
import { renderSection, useConfig, writeToFile } from './hooks.ts'

// changed from `./hooks.ts` to `./hooks`
import { renderSection, useConfig, writeToFile } from './hooks'

Answer 4

这与TypeScript模块分辨率有关，您可以在baseUrl字段下的tsconfig.json中配置compilerOptions，例如：

{
  "compilerOptions": {
    "outDir": "build",
    "allowJs": true,
    "target": "es5",
    "jsx": "react",
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./src/"
  },
  "include": [
    "src/**/*.tsx?"
  ],
  "exclude": [
    "node_modules",
    "**/__snapshots__/*",
    "**/*.snap",
    "**/*.test.jsx?"
  ]
}

因此，使用此配置，假设您有一个文件src/app/alarm/index.tsx，可以在其中从'src / util / Validator.ts`导入Validator，

import Validator from 'util/Validator'

Answer 5

我遇到了同样的问题，对我来说解决方案是重新运行该应用程序。就我而言，我刚刚完成了一些文件到.tsx的转换，也许可以解释它。