您的包现在可以作为 myproject-jsdeps.js. 包已经准备好了, 我们已经完成了我们的任务(导入依赖项并将其导出到浏览器). 下一步是使用JavaScript库，这是一个不同的问题，一个Scala.Js编码问题. 为了完整起见，我们现在将讨论如何在Scala中使用bundle.Js并创建facade来使用我们导入的库.

在Scala中使用泛型JavaScript库.js应用程序

To recap, 我们刚刚看到了如何使用NPM和Browserify来创建一个bundle, 并在Scala中包含该bundle.js. 但是我们如何使用一个通用的JavaScript库呢?

完整的过程，我们将在文章的其余部分详细解释，是:

\n
• 从NPM中选择您的库，并将它们包含在 包/包.json.
\n
• 把它们装满 require 在库模块文件中，在 bundle/lib.js.
\n
• Write Scala.. Js的外观来解释 Bundle Scala中的对象.js.
\n
• 最后，使用新类型的库编写应用程序代码.
\n

添加依赖项

使用NPM时，你必须将依赖项包含在 package.json 文件，这是标准的.

那么，让我们假设您想使用两个著名的库，如jQuery和Loadash. 此示例仅用于演示目的, 因为已经有一个很好的jQuery包装器作为Scala的依赖项.Lodash在Scala世界中是无用的. 尽管如此，我认为这是一个很好的例子，但只是一个例子.

所以，去 npmjs.com 网站和找到你想要使用的库，并选择一个版本. 假设你选择了 jquery-browserify version 13.0.0 and lodash version 4.3.0. 然后，更新 依赖关系 你的那块 packages.json as follows:

\"依赖关系\": {\n  \"browserify\": \"13.0.0\",\n  \"jquery-browserify\": \"1.8.1\",\n  \"lodash\": \"4.3.0\"\n}\n

Always keep browserify，因为它是生成bundle所需的. 但是，您不需要将其包含在包中.

注意，如果你已经安装了NPM，你可以直接从 bundle directory:

NPM install——save jquery-browserify lodash\n

它还将更新 package.json. 如果你没有安装NPM，也不用担心. SBT将安装Java版本的Node.下载所需的jar并运行它们. 所有这些都是在运行时管理的 bundle 来自SBT的命令.

导出库

现在我们知道了如何下载这些包. 下一步是指示Browserify将它们收集到一个包中，并使它们对应用程序的其余部分可用.

Browserify是一个收集 require，模拟节点.Js的行为，这意味着您需要在某个地方有一个 require 导入库. 因为我们需要将这些库导出到Scala.. js, bundle也会生成一个顶级JavaScript对象 Bundle. 你需要做的是编辑 lib.js，它导出一个JavaScript对象，并要求您的所有库作为该对象的字段.

如果我们想导出到Scala.在代码中，这意味着:

module.exports = {\n \"jquery\": require(\"jquery-browserify\"),\n \"lodash\": require(\"lodash\")\n}\n

现在，只需执行命令 bundle 库将被下载, 收集起来并放在一捆里, 准备在Scala中使用.js应用程序.

访问Bundle

So far:

\n
• 您已经在Scala中安装了bundle子项目.. Js项目并正确配置它.
\n
• 对于您想要的任何库，您可以将其添加到 package.json.
\n
• 你在 lib.js.
\n
• 你执行了 bundle command.
\n

结果，你现在有 Bundle 顶级JavaScript对象, 为库提供所有入口点, 作为该对象的字段可用.

现在可以将它与Scala一起使用了.js. 在最简单的情况下，你可以这样做来访问库:

@js.native\n对象包扩展js.Object {\n  Def jquery: js.Any = js.native\n  Def lodash: js.Any = js.native\n}\n

这段代码允许您从Scala访问库.js. 但是，在Scala中不应该这样做.因为库仍然是未类型化的. Instead, 你应该写“立面”, or wrappers, 所以你可以在一个类型化的 scalish way.

我不能在这里告诉你如何编写facade，因为它取决于你想在Scala中包装的特定JavaScript库.js. 为了完成讨论，我将只展示一个示例. 请查看 官方Scala.js文件 欲知详情. 你也可以咨询 可用facade的列表 并阅读源代码以获得灵感.

到目前为止，我们讨论了任意的、尚未映射的库的过程. 在本文的其余部分中，我将使用一个 已经可以 门面，所以讨论的只是一个例子.

在Scala中封装JavaScript API.js

当你使用 require 在JavaScript中，您得到的对象可以是许多不同的东西. 它可以是一个函数或一个对象. 它甚至可以只是一个字符串或布尔值，在这种情况下 require 只对副作用起作用吗.

在这个例子中， jquery 是一个函数，返回一个提供额外方法的对象. 典型的用法是 jquery().. 这是一个化简，因为 jquery 也允许 $. 但是在这个简化的示例中，我不打算涵盖所有这些情况. 一般注意事项, 对于复杂的JavaScript库，并不是所有的API都可以很容易地映射到静态Scala类型. 你可能需要求助于 js.Dynamic 为JavaScript对象提供动态(无类型)接口.

因此，为了捕获更常见的用例，我在 Bundle object, jquery:

Def jquery: js.Function1 (js.任意，Jquery] = js.native\n

这个函数将返回一个jQuery对象. 在我的例子中，trait的实例是用一个方法定义的(一种简化), 你可以添加你自己的):

@js.native\nJquery扩展js.Object {\n   Def text(arg: js.任意):Jquery = js.native\n}\n

对于Lodash库, 我们将整个库建模为一个JavaScript对象，因为它是一个可以直接调用的函数集合:

deflodash: lodash = js.native  \n

Where the lodash Trait如下(也是一个简化，你可以在这里添加你的方法):

@js.native\ntrait Lodash扩展了js.Object {\n   def camelCase(参数:js . js.Any): String = js.native\n}\n

使用这些定义, 现在我们终于可以使用底层jQuery和Lodash库编写Scala代码了, 都从NPM加载，然后 browseried:

对象Main扩展JSApp {\n  def main(): Unit = {\n    导入包._\n    jquery(\"#title\").text(lodash.camelCase(\"This is a test\"))\n  }\n}\n

您可以查看完整的示例 here.

Conclusion

I am a Scala开发人员当我发现Scala时，我很兴奋.因为我可以为服务器和客户端使用相同的语言. 因为Scala更类似于JavaScript而不是Java，所以Scala.Js在浏览器中非常简单和自然. Furthermore, 您还可以使用Scala的强大功能作为丰富的库集合, macros, 强大的ide和构建工具. 其他主要优点是可以在服务器和客户机之间共享代码. 这个特性在很多情况下都很有用. 如果你使用像Coffeescript这样的Javascript转译器, Babel或Typescript, 在使用Scala时，您不会注意到太多的差异.，但仍有许多优点. 秘诀在于取长补短，并确保它们很好地协同工作.