javascript - 如何在 Rhino 中运行 ES6 和 npm deps

Question

情况:您有一个自己或第三方编写的 JS 模块。它可能有 npm 依赖项。它可以使用 ES6 语法编写，并且可以使用新的 ES6(或 7 等)功能。您想在 Rhino 上使用它.

问题:Rhino 支持 require()ing 文件，但它不支持 npm 的 OOTB。它仅支持 JavaScript 5 语法和功能。

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

Answer 1

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

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

详细信息:说起来容易做起来难。请继续阅读分步指南。

1. 创建一个“bundler”目录。稍后，我们会将 mymodule.js 放入其中，但让我们暂缓这样做。

2. cd 进入您的捆绑程序目录并运行 npm init 以创建 package.json 文件。

3. 将构建命令添加到 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 可以改为“usage”，这可能会更好，具体取决于您的情况。

安装东西

:

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

这就完成了“ bundler ”本身的设置。您可以保存目前拥有的内容以供将来使用。以下步骤现在展示如何在您的模块之一上使用此 bundler ...

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

添加行

:

import "core-js/stable";

到 mymodule.js 的顶部。这会导入所需的 Polyfill。为了减少文件大小，您可以导入模块(及其依赖项)实际使用的特定 JS 功能。例如，import "core-js/stable/number/is-nan"; 可导入 Number 类的 isNaN 方法。但可能很难知道您具体使用什么。这就是为什么“使用”选项与浏览器列表一起可能是最好的瘦身方法。请参阅core-js了解更多。

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

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

module.exports = mylib;

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

最后，运行您在第 4 步中编写的构建命令

:

npm run build

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

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

祝你编码愉快。