如何在Rhino中运行ES6和npm deps

Question

情况：你有自己编写的JS模块或第三方。 它可能有npm依赖项。 它可以使用ES6语法编写，并且可以使用新的ES6（或7等）功能。 你想在Rhino上使用它。

问题： Rhino支持require（）文件，但它没有对npm的OOTB支持。 它仅支持JavaScript 5语法和功能。

如何在Rhino上运行我漂亮的新JS？

Answer 1

您可以将JS捆绑到单个文件中并将其转换为JS 5。

解决方案： Babel支持JS语法转换。 core-js polyfill填补了缺少的ES6功能。 Browserify支持将依赖关系树（包括npm依赖关系）捆绑到单个独立文件中。

细节：说起来容易做起来难。 请继续阅读以获取分步指南。

1. 创建一个“bundler”目录。 稍后，我们会将mymodule.js放入其中，但让我们暂时不予考虑。

2. cd进入你的bundler目录并运行npm init来创建一个package.json文件。

3. 将您的构建命令添加到package.json的“scripts”部分

：

"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时，您需要将此文件重命名为模块名称。

4. 创建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可以是“用法”，取决于您的情况可能会更好。

5. 安装东西

：

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

这样就完成了“捆绑器”的设置。 您可以保存到目前为止的所有内容以备将来使用。 以下步骤现在显示如何在您的某个模块上使用此捆绑器...

6. 将您的模块文件（我们称之为mymodule.js）及其所有依赖项放入bundler目录中。 这包括运行npm install ...来安装所有mymodule.js的npm依赖项。

7. 添加行

：

import "core-js/stable";

到mymodule.js的顶部。 这将导入所需的polyfill。 要减少文件大小，可以导入模块（及其依赖项）实际使用的特定JS功能。 例如， import "core-js/stable/number/is-nan"; 在Number类上导入isNaN方法。 虽然知道你具体使用什么可能很困难。 这就是为什么“使用”选项与browserslist同步可能是减肥的最佳方式。 有关更多信息，请参阅core-js 。

例如，您的文件可能如下所示：

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

module.exports = mylib;

如果它只是你想在Rhino中使用的第三方库。 如果它是你自己编写的模块，那么顶部的core-js导入和底部的module.exports之间会有一堆代码。

8. 最后，运行您在步骤4中编写的build命令

：

npm run build

您现在应该有一个名为bundle.js的文件。 您应该能够将该文件复制到Rhino引擎将找到它的位置，它应该可以工作。

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

快乐的编码。