Разрешение машинописных модулей в браузере дает 404 - PullRequest
Новая
       0

Разрешение машинописных модулей в браузере дает 404

0 голосов
/ 28 апреля 2020

Я хочу собрать небольшой пример веб-приложения, созданного с использованием typescript. У меня проблема с импортом модуля.

Я просто хочу получить информацию о том, почему это не так, и какие варианты у меня есть для его сортировки.

Проблема в файле 404 для файла index. js при попытке импортировать привет.

Вот код:

index. html

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <p>Check the console log...</p>
    </body>

    <script type="module" src="/dist/index.js"></script>
</html>

index.ts 

import { HelloWorld } from "./hello";

var helloWorld = new HelloWorld();

helloWorld.sayHello();

hello.ts 

export class HelloWorld {
    constructor() {

    }

    sayHello() {
        console.log("Hello, world!");
    }
}

tsconfig. json

{
    "compilerOptions": {
      "target": "ES2015",
      "module": "ES2015",
      "lib": ["es2015", "dom"],
      "moduleResolution": "node",

      "allowJs": true,
      "checkJs": true,
      "sourceMap": true,
      "outDir": "./dist",
      "strict": true,
      "esModuleInterop": true,
      "experimentalDecorators": true,
      "forceConsistentCasingInFileNames": true
    }
  }

Вывод вышеперечисленного с использованием tsc для компиляции приложения выглядит следующим образом: 

dist
    hello.js
    hello.js.map
    index.js
    index.js.map

Это как следует:

привет. js

export class HelloWorld {
    constructor() {
    }
    sayHello() {
        console.log("Hello, world!");
    }
}
//# sourceMappingURL=hello.js.map

index. js

import { HelloWorld } from "./hello";
var helloWorld = new HelloWorld();
helloWorld.sayHello();
//# sourceMappingURL=index.js.map

Теперь, если я изменю index.ts на полную hello.js вместо hello тогда это будет работать. Это кажется неправильным - так как нет index.js, пока я кодирую это.

Как правильно решить эту проблему для запуска в ES2015 совместимом браузере, таком как Chrome?

Должен ли я использовать что-то вроде requirejs?

Ответы [ 2 ]

1 голос
/ 28 апреля 2020

Вы можете использовать import h from './hello.js' в своей машинописи.
Также читайте эту ветку https://github.com/microsoft/TypeScript/issues/16577

0 голосов
/ 29 апреля 2020

Рассмотрите возможность использования загрузчика модулей, такого как Система JS. Рассматривая пример , который они предоставили, он показывает, как этого добиться без изменения импорта машинописного текста.

В приведенном выше примере вы можете внести следующие изменения:

index. html

Добавить ссылку на скрипт для системы js.

Используйте системный синтаксис js import javascript для загрузки модуля индекса. Расширение не требуется.

Добавьте ссылку на скрипт для импорта распознавателя (resol. js), который требуется для загрузки файлов без расширения javascript. 

<!DOCTYPE html>
<html>

<head>
    <title>Hello World</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.3.1/system.min.js"
        integrity="sha256-15j2fw0zp8UuYXmubFHW7ScK/xr5NhxkxmJcp7T3Lrc=" crossorigin="anonymous"></script>
    <script src="./dist/systemjs-hooks/resolve.js"></script>
    <script>System.import("./dist/index")</script>

</head>

<body>
    <p>Check the console log...</p>
</body>

</html>

resol.ts

Взято из системы js пример. 

(function () {
    const endsWithFileExtension = /\/?\.[a-zA-Z]{2,}$/;
    const originalResolve = System.constructor.prototype.resolve;
    System.constructor.prototype.resolve = function () {
      // apply original resolve to make sure importmaps are resolved first
      const url = originalResolve.apply(this, arguments);
      // append .js file extension if url is missing a file extension
      return endsWithFileExtension.test(url) ? url : url + ".js";
    };
  })();

tsconfig. json

Измените module на system. 

{
    "compilerOptions": {
      "target": "ES2015",
      "module": "system",
      "lib": ["es2015", "dom"],
      "moduleResolution": "node",

      "allowJs": true,
      "checkJs": true,
      "sourceMap": true,
      "outDir": "./dist",
      "strict": true,
      "esModuleInterop": true,
      "experimentalDecorators": true,
      "forceConsistentCasingInFileNames": true
    }
  }

index. js output

Вы можете увидеть совершенно другой выход с module, установленным на system. 

System.register(["./hello"], function (exports_1, context_1) {
    "use strict";
    var hello_1, helloWorld;
    var __moduleName = context_1 && context_1.id;
    return {
        setters: [
            function (hello_1_1) {
                hello_1 = hello_1_1;
            }
        ],
        execute: function () {
            helloWorld = new hello_1.HelloWorld();
            helloWorld.sayHello();
        }
    };
});

. json

Нам нужно ввести еще несколько devDependencies, чтобы использовать систему в resolve.ts. 

{
  "name": "foo",
  "version": "0.0.1",
  "description": "foo",
  "main": "index.js",
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/systemjs": "^6.1.0",
    "typescript": "^3.8.3"
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...