您的包现在可以作为 myproject-jsdeps.js
. 包已经准备好了, 我们已经完成了我们的任务(导入依赖项并将其导出到浏览器). 下一步是使用JavaScript库,这是一个不同的问题,一个Scala.Js编码问题. 为了完整起见,我们现在将讨论如何在Scala中使用bundle.Js并创建facade来使用我们导入的库.
To recap, 我们刚刚看到了如何使用NPM和Browserify来创建一个bundle, 并在Scala中包含该bundle.js. 但是我们如何使用一个通用的JavaScript库呢?
\n\n完整的过程,我们将在文章的其余部分详细解释,是:
\n\n包/包.json
.require
在库模块文件中,在 bundle/lib.js
.Bundle
Scala中的对象.js.使用NPM时,你必须将依赖项包含在 package.json
文件,这是标准的.
那么,让我们假设您想使用两个著名的库,如jQuery和Loadash. 此示例仅用于演示目的, 因为已经有一个很好的jQuery包装器作为Scala的依赖项.Lodash在Scala世界中是无用的. 尽管如此,我认为这是一个很好的例子,但只是一个例子.
\n\n所以,去 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
\n\nAlways keep browserify
,因为它是生成bundle所需的. 但是,您不需要将其包含在包中.
注意,如果你已经安装了NPM,你可以直接从 bundle
directory:
NPM install——save jquery-browserify lodash\n
\n\n它还将更新 package.json
. 如果你没有安装NPM,也不用担心. SBT将安装Java版本的Node.下载所需的jar并运行它们. 所有这些都是在运行时管理的 bundle
来自SBT的命令.
现在我们知道了如何下载这些包. 下一步是指示Browserify将它们收集到一个包中,并使它们对应用程序的其余部分可用.
\n\nBrowserify是一个收集 require
,模拟节点.Js的行为,这意味着您需要在某个地方有一个 require
导入库. 因为我们需要将这些库导出到Scala.. js, bundle也会生成一个顶级JavaScript对象 Bundle
. 你需要做的是编辑 lib.js
,它导出一个JavaScript对象,并要求您的所有库作为该对象的字段.
如果我们想导出到Scala.在代码中,这意味着:
\n\nmodule.exports = {\n \"jquery\": require(\"jquery-browserify\"),\n \"lodash\": require(\"lodash\")\n}\n
\n\n现在,只需执行命令 bundle
库将被下载, 收集起来并放在一捆里, 准备在Scala中使用.js应用程序.
So far:
\n\npackage.json
.lib.js
.bundle
command.结果,你现在有 Bundle
顶级JavaScript对象, 为库提供所有入口点, 作为该对象的字段可用.
现在可以将它与Scala一起使用了.js. 在最简单的情况下,你可以这样做来访问库:
\n\n@js.native\n对象包扩展js.Object {\n Def jquery: js.Any = js.native\n Def lodash: js.Any = js.native\n}\n
\n\n这段代码允许您从Scala访问库.js. 但是,在Scala中不应该这样做.因为库仍然是未类型化的. Instead, 你应该写“立面”, or wrappers, 所以你可以在一个类型化的 scalish way.
\n\n我不能在这里告诉你如何编写facade,因为它取决于你想在Scala中包装的特定JavaScript库.js. 为了完成讨论,我将只展示一个示例. 请查看 官方Scala.js文件 欲知详情. 你也可以咨询 可用facade的列表 并阅读源代码以获得灵感.
\n\n到目前为止,我们讨论了任意的、尚未映射的库的过程. 在本文的其余部分中,我将使用一个 已经可以 门面,所以讨论的只是一个例子.
\n\n当你使用 require
在JavaScript中,您得到的对象可以是许多不同的东西. 它可以是一个函数或一个对象. 它甚至可以只是一个字符串或布尔值,在这种情况下 require
只对副作用起作用吗.
在这个例子中, jquery
是一个函数,返回一个提供额外方法的对象. 典型的用法是 jquery(
. 这是一个化简,因为 jquery
也允许 $.
但是在这个简化的示例中,我不打算涵盖所有这些情况. 一般注意事项, 对于复杂的JavaScript库,并不是所有的API都可以很容易地映射到静态Scala类型. 你可能需要求助于 js.Dynamic
为JavaScript对象提供动态(无类型)接口.
因此,为了捕获更常见的用例,我在 Bundle
object, jquery
:
Def jquery: js.Function1 (js.任意,Jquery] = js.native\n
\n\n这个函数将返回一个jQuery对象. 在我的例子中,trait的实例是用一个方法定义的(一种简化), 你可以添加你自己的):
\n\n@js.native\nJquery扩展js.Object {\n Def text(arg: js.任意):Jquery = js.native\n}\n
\n\n对于Lodash库, 我们将整个库建模为一个JavaScript对象,因为它是一个可以直接调用的函数集合:
\n\ndeflodash: lodash = js.native \n
\n\nWhere the lodash
Trait如下(也是一个简化,你可以在这里添加你的方法):
@js.native\ntrait Lodash扩展了js.Object {\n def camelCase(参数:js . js.Any): String = js.native\n}\n
\n\n使用这些定义, 现在我们终于可以使用底层jQuery和Lodash库编写Scala代码了, 都从NPM加载,然后 browseried:
\n\n对象Main扩展JSApp {\n def main(): Unit = {\n 导入包._\n jquery(\"#title\").text(lodash.camelCase(\"This is a test\"))\n }\n}\n
\n\n您可以查看完整的示例 here.
\n\nI am a Scala开发人员当我发现Scala时,我很兴奋.因为我可以为服务器和客户端使用相同的语言. 因为Scala更类似于JavaScript而不是Java,所以Scala.Js在浏览器中非常简单和自然. Furthermore, 您还可以使用Scala的强大功能作为丰富的库集合, macros, 强大的ide和构建工具. 其他主要优点是可以在服务器和客户机之间共享代码. 这个特性在很多情况下都很有用. 如果你使用像Coffeescript这样的Javascript转译器, Babel或Typescript, 在使用Scala时,您不会注意到太多的差异.,但仍有许多优点. 秘诀在于取长补短,并确保它们很好地协同工作.
\n\n