Могу ли я использовать requirejs для загрузки модулей в машинописном коде?

Я использую typescript и requirejs. Я хочу импортировать код своей библиотеки в виде модулей, чтобы не делать все вокруг глобальным. Моя проблема в том, что любое использование импорта или экспорта в машинописном файле превращает весь файл в модуль. В случае кода моего приложения это означает, что его нельзя вызвать напрямую.

Вот пример приложения.

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>My Test App</title>
        <script src="require.js"></script>
        <script src="app1.js"></script>
        <script src="app2.js"></script>
    </head>
</html>

tsconfig.json

{
    "compilerOptions": {
        "module": "amd",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": false
    }
}

приветствие.ts

export function greet(name: string) {
    alert(`Hello ${name}`);
}

app1.ts

import { greet } from './greeter';
greet('alice');

app2.ts

import { greet } from './greeter';
greet('bob');

tsc запускается без проблем, но вот один из файлов, которые я получаю в качестве вывода.

вывод tsc: app1.js

define(["require", "exports", './greeter'], function (require, exports, greeter_1) {
    "use strict";
    greeter_1.greet('alice');
});

Это не работает. Из require.js

Обязательно загрузите все скрипты, которые вызывают define() через RequireJS API. Не кодируйте вручную теги сценариев в HTML для загрузки сценариев, в которых есть вызовы define().

Итак, как я могу убедить компилятор машинописного текста производить вывод без вызова define() в нем. В app1.ts я не собираюсь определять модуль, просто использую другие модули. require() кажется более подходящим для этого. Есть ли способ компилировать import в require()?


typescript amd requirejs tsc
person recursive    schedule 26.07.2017    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Если у вас есть один модуль, запускающий все, что необходимо для загрузки вашей страницы, вы можете использовать data-main. Если вам нужно запустить загрузку с более чем одним модулем, используйте require для загрузки модулей:

<script src="require.js"></script>
<script>
  require(["app1", "app2"]);
</script>

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

Если вы используете require.config, вы можете использовать опцию deps для той же цели:

<script src="require.js"></script>
<script>
  require.config({
    // You could have more config here... in addition to:
    deps: ["app1", "app2"]
  });
</script>

В настоящее время нет способа заставить tsc выводить require вместо define. Я бы не стал ждать, пока такая функция будет добавлена, потому что есть легкодоступные способы получить те же конечные результаты, которые позволила бы такая функция.

person Louis    schedule 27.07.2017

arrow_upward
0
arrow_downward

Исправить

Из документов, которые вы уже нашли:

Обязательно загрузите все скрипты, которые вызывают define() через RequireJS API.

Также с стартовой страницы документации: http://requirejs.org/docs/start.html

и только ссылайтесь на require.js с помощью вызова requirejs, чтобы загрузить ваш скрипт:

<script data-main="scripts/main" src="scripts/require.js"></script>

^ это тег script, который должен загружать точку входа вашего приложения.

Более

Итак, как я могу убедить компилятор машинописного текста производить вывод без вызова define() в нем.

да. Но если вы хотите использовать requirejs, то это неправильный вопрос. Исправление, как я уже упоминал, то есть используйте правильный тег скрипта.

person basarat    schedule 27.07.2017
comment
Спасибо, но это не идеально. В моем примере есть две точки входа и только одна база данных. Если не требуется js, есть ли другой способ использовать импорт в машинописи, совместимой с браузером? - person recursive; 27.07.2017