Как преобразовать связанные с React пакеты узлов в репозитории npmjs.com в ES5?

Question

Как новичок, я пытаюсь понять, что такое логика для реактивных пакетов в репозитории npmjs.com.

Я нахожу это немного странным, поскольку некоторые устанавливаемые мной модули работают безупречно с моим приложением (например, response-motion), где некоторые отказываются работать, предоставляя Uncaught SyntaxError: Unexpected token import ошибка (такая как реагирующая сортируемая панель).

До сих пор я понимал, что это как-то связано с ES5. Модули, которые реализованы с ES6 или ES7, должны быть преобразованы в ES5.

У меня вопрос, как я могу понять, если пакет не совместим с ES5 и что я могу сделать, чтобы преобразовать его в ES5 во время или после того, как я использовал yarn add Команда для установки пакета на мой node_modulesкаталог?

Answer 1

TL:DR. Перенесите ваш код или используйте:

import { SortablePane, Pane } from 'react-sortable-pane/lib/react-sortable-pane.es5';

Обо всем по порядку.

Две основные папки Src и Lib

Общепринятое соглашение для проектов javascript - поместить весь код разработки в папку с именем src, Эта папка может содержать код, такой как ES5 или ES6, в зависимости от того, с чем разработчик хочет работать.

Другая основная папка обычно называется lib который содержит весь код из src он передается (например, с babel, например, из ES6 в ES5), конвертируется и обычно связывается (например, webpack minify), чтобы он мог работать в браузерах, которые поддерживает этот пакет npm (очевидно, варьируется от пакета к пакету). Эта папка содержит только код, который имеет отношение к пользователю, использующему пакет, т.е. все тесты не конвертируются и не связываются, потому что это не является причиной.

Точка входа

Другая важная часть для пакетов npm - это точка входа для пакета npm. По умолчанию NodeJS будет искать файл index.js в импортированном пакете (я думаю). Это можно перезаписать, указав main ключ в package.json.

Пример в package-json для response-motion:

"main": "lib/react-motion.js"

Мы можем видеть, что это указывает на lib, Но где находится папка lib на их Github??? Это не их, потому что обычно вы не хотите проверять папку lib для контроля версий, потому что это просто передается для пакета npm.

Мы можем подтвердить это, установив реагирующее движение и посмотрев в node_modules/react-motion, Здесь есть папка lib с перенесенным кодом, которая готова к использованию в любом браузере без babel.

Но почему не все пакеты npm делают это для меня!?!??!

Большинство делают, и они должны делать на самом деле. Я делаю в моих пакетах.

Пакет npm для реактивно-сортируемой плоскости использует это вместо "jsnext:main": "./lib/react-sortable-pane.js" это в основном означает, что он использует синтаксис ES5 везде, но с импортом / экспортом, и я не видел раньше, потому что он не используется широко.

См. Https://github.com/rollup/rollup/wiki/pkg.module#wait-it-just-means-import-and-export--not-other-future-javascript-features

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

Вам все равно придется перенести этот пакет, если вы хотите использовать более старую поддержку браузера или просто импортировать файл.es5.js, например:

import { SortablePane, Pane } from 'react-sortable-pane/lib/react-sortable-pane.es5';

Надеюсь это поможет. Я знаю, что это путает со многими чертовыми средами, такими как UMD, Common, Node и т.д

Answer 2

Решение состоит в том, чтобы учесть любую версию Javascript и использовать транспортер, чтобы убедиться, что различные версии JS, которые могут присутствовать в вашем коде и импортированных модулях, будут включены в конфигурацию вашего транспилятора. Просматривать ваши модули и пытаться выяснить, какую версию Javascript они используют, не практическое упражнение. У большинства проектов есть куча зависимостей, и у всех этих пакетов есть свои зависимости. Таким образом, вы в конечном итоге спускаетесь в кроличью нору.

Бабель, пожалуй, самый известный перевозчик. При правильной конфигурации вы можете иметь код ES5, 6 или 7, и он будет все это переносить в один и тот же тип JS, чтобы он мог работать во всех стандартных версиях браузера.

По сути, ответ не в том, чтобы попытаться определить тип ES ваших модулей, а в том, чтобы создать процесс сборки, который может обрабатывать различные типы.