Javascript 如何在Rhino中运行ES6和npm deps

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

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

---

如何在Rhino上运行全新的JS功能？

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

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

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

创建一个“bundler”目录。稍后，我们将把mymodule.js放在其中，但我们暂缓讨论

cd

放入bundler目录，运行

npm init

创建package.json文件

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

:

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

:

corejs的最新版本目前是3，但如果有，请使用更新的版本。UseBuiltin可以改为“usage”，根据您的情况可能更好

安装东西

:

这就完成了“绑定器”本身的设置。您可以保存到目前为止的内容以备将来使用。下面的步骤现在显示如何在您的一个模块上使用此捆绑程序

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

npm安装…

来安装mymodule.js的所有npm依赖项

添加行

:

到mymodule.js的顶部。这将导入所需的多边形填充。为了减小文件大小，可以导入模块（及其依赖项）实际使用的特定JS功能。例如，

import“core js/stable/number/is nan”

导入Number类上的isNaN方法。但要知道你具体使用了什么可能很困难。这就是为什么“使用”选项与browserslist相结合可能是减肥的最佳方式。更多信息，请参阅

例如，您的文件可能看起来像：

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

module.exports = mylib;

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

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

:

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

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

快乐编码

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

import "core-js/stable";

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

module.exports = mylib;

npm run build

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