Как запустить ES6 и Npm Deps в Rhino - PullRequest
Новая
       41

Как запустить ES6 и Npm Deps в Rhino

0 голосов
/ 25 июня 2019

Ситуация: У вас есть модуль JS, который вы написали себе или третьему лицу. Может иметь зависимости от npm. Он может быть написан с использованием синтаксиса ES6 и может использовать новые функции ES6 (или 7 и т. Д.). Вы хотите использовать его на Rhino .

Проблема: Rhino поддерживает требующие () файлы, но не поддерживает OOTB для npm. Он поддерживает только синтаксис и функции JavaScript 5.

Как я могу запустить свои довольно новые JS-вещи на Rhino?

1 Ответ

0 голосов
/ 25 июня 2019

Вы можете объединить свой JS в один файл и преобразовать его в JS 5.

Решение: Babel поддерживает преобразование синтаксиса JS.Полифилы core-js восполняют недостающие возможности ES6.Browserify поддерживает объединение дерева зависимостей (включая зависимости npm) в один автономный файл.

Подробности: Проще сказать, чем сделать.Читайте пошаговое руководство.

  1. Создайте каталог "bundler".Позже мы добавим в него файл mymodule.js, но давайте не будем останавливаться на этом.

  2. cd в каталоге вашего компоновщика и запустим npm init, чтобы создать файл package.json.

  3. Добавьте команду сборки в раздел «scripts» файла package.json

: 

"build": "browserify mymodule.js -t babelify --standalone mymodule -o bundle.js"

browserify mymodule.js означает, что browserify собирается объединить mymodule.js и все его зависимости.-t babelify означает, что babel будет транслировать код, преобразовывая вещи ES6 в 5. --standalone mymodule означает, что вещи, экспортируемые вашим модулем через module.exports, будут сохранены.-o bundle.js означает, что выходной файл будет bundle.js.Вы захотите переименовать этот файл обратно в имя вашего модуля, когда добавите его в Rhino.

Создайте файл конфигурации babel babel.config.js

: 

module.exports = function (api) {
  api.cache(true);

  const presets = [
    [
      "@babel/preset-env",
      {
        useBuiltIns: "entry",
        corejs: 3,
      }
    ],
  ];

  const plugins = [];

  return {
    presets,
    plugins
  };
};

Самая новая версия corejs - это 3, но используйте более новую версию, если она есть,Вместо этого useBuiltins может быть «use», что может быть лучше в зависимости от вашей ситуации.

Установить вещи

: 

npm install --global browserify
npm install --save-dev babelify @babel/core @babel/preset-env
npm install core-js

На этом настройка вашего "упаковщика", как таковая, завершена.Вы можете сохранить то, что у вас есть, для дальнейшего использования.Следующие шаги теперь показывают, как использовать этот упаковщик на одном из ваших модулей ...

Поместите файл модуля (назовем его mymodule.js) и все его зависимости в каталог bundler.Это включает выполнение npm install ... для установки всех зависимостей mymodule.js от npm.

Добавьте строку

: 

import "core-js/stable";

в начало mymodule.js.Это импортирует необходимые полифилы.Чтобы уменьшить размер файла, вы можете импортировать конкретные функции JS, которые фактически использует ваш модуль (и его зависимости).Например, import "core-js/stable/number/is-nan"; для импорта метода isNaN в класс Number.Хотя может быть трудно узнать, что вы конкретно используете.Вот почему вариант «использования» в тандеме со списком браузеров может быть лучшим способом похудеть.См. core-js для получения дополнительной информации.

Например, ваш файл может выглядеть следующим образом: 

import "core-js/stable";
import mylib from "my-3rd-party-lib";

module.exports = mylib;

, если это не что иное, как сторонняя библиотека, которую вы хотитеиспользовать в Rhino.Если это модуль, который вы написали сами, то между импортом core-js вверху и module.exports внизу будет куча кода.

Наконец, запустите команду сборки, которую вы написали на шаге 4

: 

npm run build

Теперь у вас должен быть файл с именем bundle.js.Вы должны быть в состоянии скопировать этот файл в место, где его найдет движок Rhino, и он должен работать. 

cp bundle.js /path/to/where/to/place/dist/file/mymodule.js

Счастливое кодирование.

...