Как использовать пакеты NPM в браузере с помощью TypeScript?

Это моя установка:Как использовать пакеты NPM в браузере с помощью TypeScript?

index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 

    <script src="../node_modules/systemjs/dist/system.js"></script> 
    <script src="../node_modules/lodash/index.js"></script> 
</head> 
<body> 
    <script> 
     System.config({ 
      packages: {'js': {defaultExtension: 'js'}} 
     }); 

     System 
      .import('./js/app') 
      .catch(console.error.bind(console)); 
    </script> 
</body> 
</html>

app.ts

import {_} from 'lodash'; 

export class App {};

Когда я пытаюсь transpiling машинопись в JavaScript Я получаю ошибку ниже:

error TS2307: Cannot find module 'lodash'.

Каков наиболее стандартный/рекомендуемый способ загрузки упаковки NPM в ваш проект при использовании TypeScript?

Примечание

node_modules доступно и файл node_modules/lodash/index.js в настоящее время служит правильно.
Я стараюсь не использовать Bower, потому что я нахожу, что это должно быть сделано с NPM.
Я использую SystemJS, который, я считаю, является универсальным загрузчиком модулей.

источник

2015-12-04 Pablo

Для начала, даже если ваш каталог node_modules доступен, я думаю, что обычно отдельный набор клиентских пакетов используется через нечто вроде Bower (который сам по себе, пакет NPM). Во-вторых, вам может потребоваться загрузить менеджер зависимостей, например commonjs или requirejs, перед другими сценариями в браузере, тогда как поддержка импорта встроена прямо в узел. – Katana314

Привет @ Katana314 благодарит за ваш комментарий. См. Мой ответ в разделе «Примечания». – Pablo

"* Я нахожу, что это нужно делать с помощью NPM. *" - Можете ли вы объяснить это рассуждение дальше? Я должен отметить, что мой каталог node_modules имеет тенденцию содержать много файлов, которые абсолютно не имеют смысла публично обслуживаться, и то же самое может быть верно и для вас. – Katana314

Во-первых, машинописный текст не может найти ваш модуль, потому что вам нужно поместить образцы в свой файл. Во-вторых, вам нужно экспортировать свой машинописный текст, используя флаг системы -module (или эквивалент в tsconfig.json). И в-третьих, его нужно загружать с помощью systemjs. Я очень рекомендую вам использовать JSPM для этого, я знаю, что знаю - еще один менеджер пакетов, но это скорее расширение NPM, чем что-либо еще. Это позволяет вам легко управлять файлами Systemjs. http://jspm.io/

источник

2015-12-04 16:18:26 Zachrip

Боюсь, я не famililar с SystemJs, но от того, что я знаю, модульных погрузчиков, они признают библиотеки по пути, который они были загружены из, а не глобальное имя модуля или что-нибудь. Таким образом, lodash, загруженный через <script>, на самом деле не поможет ему узнать, имеет ли он это, или какой объект вернуть. В базовых терминах вы захотите загрузить его через загрузчик вашего модуля, а не самостоятельно.

Однако, скорее всего, вы не захотите написать «../node_modules/» во все ваши запросы в сценарии; это будет раздражать. Вы можете просмотреть конфигурационную документацию SystemJs, чтобы узнать, есть ли способ создать сопоставление, так что конкретное имя модуля автоматически заставит его знать, как использовать определенный путь для скрипта.

источник

2015-12-04 16:53:58 Katana314

Как использовать пакеты NPM в браузере с помощью TypeScript?

ответ

Смежные вопросы