2017-01-15 12 views
0

Я пишу небольшое веб-приложение в TypeScript и связывая окончательный JS с Browserify. Весь пакет JS занимает 30 кб без указания.Использование Ramda в TypeScript без связывания внутри моего кода приложения

Теперь я хочу использовать несколько функций библиотеки Ramda. Если я установил Ramda через npm и импортировал его из своего кода приложения, полученный пакет увеличится до более чем 300 кб.

Так я загрузке Ramda как независимый сценарий из index.html:

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.23.0/ramda.min.js"></script> 
<script src="bundle.js"></script> <!-- My small app --> 

Теперь из моего приложения кода я просто:

declare var R; 

И мое приложение имеет доступ ко всем функциям Ramda из R глобальной переменной. Однако использование этого подхода имеет основное ограничение: R имеет тип any, и нет проверки типа.

Поэтому я хотел бы сделать npm install @types/ramda, чтобы иметь все проверки типов, но без необходимости делать npm install ramda во избежание связывания кода Ramda в моем приложении.

Я пробовал много комбинаций import, таких как import R from '@types/ramda', но я всегда получаю сообщения об ошибках на каком-то этапе.

Теперь я всегда мог просто скопировать определения типа Рамды внутри моего кода проекта ... но есть ли более чистый способ делать то, что я хочу? Короче говоря, можно ли использовать Ramda с проверкой типов, не связывая весь свой код в моем приложении? Если да, то как?

+0

Вы пытались набирать вашу глобальную переменную 'R' так, как это' declare var R: R.Static; '? – Philipp

+0

Да, и я получаю '[ts] Не могу найти пространство имен« R''. Я пробовал много комбинаций, таких как: 'import {} из '@ types/ramda'; declare var R: R.static; ' Невозможно сделать машинописный текст понятным, что я хочу. –

+1

Я еще не работал с ramda, но мы обычно используем [Trippe-Slash Directive] (https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html), чтобы ссылаться на правильное определение файл в файле машинописных файлов. Например: /// '. А затем определим переменную 'declare var R: R.Static;'. – Philipp

ответ

0

Кажется, что Browserify - очень простой инструмент, который хорош для небольших проектов, но для более сложных требований WebPack лучше ... поэтому я переключил скрипты сборки на использование WebPack.

WebPack имеет специальную функцию, предназначенную для решения этой проблемы, с опцией конфигурации externals. Так что я просто должен был добавить это в webpack.config.js:

externals: { 
    ramda: 'R' 

}

WebPack довольно сложна в настройке и настройке, так что я создал шаблон проекта WebPack и документально его конфигурацию. Если вы заинтересованы, это here.

0

Вы можете тянуть в Ramda используя операторы импорта машинописи как:

// Entire library, and equivalent to `conts R = require('ramda'); 
import * as R from 'ramda'; 
// Usage 
R.pipe(...); 

// Specific methods only 
import { pipe, filter, keys } from 'ramda'; 
// Usage 
pipe(...); 

До тех пор, пока у вас есть ramda и @types/ramda в ваших зависимости НОГО это будет работать. Как правило, @types/ramda должен быть в ваших зависимостях от разработчиков npm, поскольку после того, как ваш источник переполнен, они больше не используются. Кроме того, вы не импортируете @types/moduleName в свой проект, квитанции автоматически получают доступ с node_modules/@types, если модуль еще не предоставляет типизацию.