Question

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

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

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

Answer 1

您可以将JS捆绑到一个文件中，然后将其转换为JS 5。

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

详细信息：说起来容易做起来难。继续阅读以获取逐步指南。

创建一个“捆绑包”目录。稍后，我们将放入mymodule.js，但让我们暂且不谈。
cd进入捆绑程序目录，然后运行npm init创建package.json文件。
将构建命令添加到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可以是“用法”，根据您的情况可能会更好。

安装东西

：

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";导入Number类上的isNaN方法。虽然可能很难知道您的具体用途。这就是为什么与浏览器列表结合使用的“使用”选项可能是苗条的最佳方法。有关更多信息，请参见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

快乐的编码。

如何在Rhino中运行ES6和npm deps

1 个答案: