如何在Rhino中运行ES6和npm依赖

Question

情况: 您有一个自己编写或第三方编写的JS模块。它可能具有npm依赖项。它可能是使用ES6语法编写的，并且可能使用新的ES6（或7等）功能。您想在Rhino上使用它。 问题: Rhino支持require()文件，但它没有原生支持npm。它仅支持JavaScript 5语法和功能。

如何在Rhino上运行我的新JS代码？

- mareoraft

Answer 1

你可以把你的JS捆绑成一个文件，并将其转换为JS 5。 解决方案： Babel支持JS语法转换。core-js polyfills填补了缺失的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 语法转换成 ES5。 --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可以改为"usage"，根据您的情况可能更好。

5. 安装必要的东西

:

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

这就完成了你的“打包器”的设置。您可以保存当前进度以备将来使用。以下步骤将展示如何在其中一个模块上使用此打包器...

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

7. 添加以下行：

import "core-js/stable";

将以下代码添加到mymodule.js文件的顶部。这将导入所需的polyfills。为了减小文件大小，您可以导入模块（及其依赖项）实际使用的特定JS功能。例如，import "core-js/stable/number/is-nan"; 导入Number类上的isNaN方法。不过，知道您具体使用了哪些功能可能会很困难。这就是为什么“usage”选项与browserslist一起使用可能是最好的瘦身方式。有关更多信息，请参见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

最初的回答

愉快的编码。

- mareoraft