Se você usa Scala.js, o compilador da linguagem Scala para JavaScript, pode achar o gerenciamento de dependência padrão de Scala.js muito limitante no mundo JavaScript moderno. Scala.js gerencia dependências com WebJars, enquanto os desenvolvedores de JavaScript gerenciam dependências usando NPM. Como as dependências produzidas pelo NPM são do lado do servidor, geralmente é necessária uma etapa adicional usando o Browserify ou Webpack para gerar o código do navegador.
Neste post, descreverei como integrar Scala.js com a infinidade de módulos JavaScript disponíveis no NPM. Você pode verificar isso Repositório GitHub para obter um exemplo prático das técnicas descritas aqui. Usando este exemplo e lendo esta postagem, você será capaz de coletar suas bibliotecas JavaScript usando NPM, criar um pacote usando Browserify e usar o resultado em seu próprio projeto Scala.js. Tudo isso sem precisar instalar o Node.js, já que tudo é gerenciado por SBT .
A magia do Browserify também pode funcionar muito bem no mundo Java! Tweet
Gerenciando dependências para Scala.js
Hoje, escrever aplicativos em linguagens que compilam para JavaScript está se tornando uma prática muito comum. Mais e mais pessoas estão migrando para linguagens JavaScript estendidas, como CoffeeScript ou TypeScript, ou transpiladores como Babel, que permitem que você use o ES6 hoje. Ao mesmo tempo, o Google Web Toolkit (um compilador de Java para JavaScript) é usado principalmente para aplicativos corporativos. Por essas razões, como desenvolvedor Scala, não considero mais o uso de Scala.js uma escolha estranha. O compilador é rápido, o código produzido é eficiente e, no geral, é apenas uma forma de usar a mesma linguagem no front-end e no back-end.
Dito isso, o uso de ferramentas Scala no mundo JavaScript ainda não é 100% natural. Às vezes, você precisa preencher a lacuna do ecossistema JavaScript para o Scala. Scala.js como linguagem tem uma excelente interoperabilidade com JavaScript. Como Scala.js é um compilador da linguagem Scala para JavaScript, é muito fácil fazer a interface do código Scala com o código JavaScript existente. Mais importante ainda, Scala.js oferece a capacidade de criar interfaces digitadas (ou fachadas) para acessar bibliotecas JavaScript não digitadas (semelhante ao que você faz com TypeScript). Para desenvolvedores acostumados com linguagens fortemente tipadas como Java, Scala ou mesmo Haskell, o JavaScript é muito vagamente tipado. Se você for um desenvolvedor, provavelmente o principal motivo é porque você pode querer usar Scala.js para obter uma linguagem (fortemente) tipada em cima de uma linguagem não tipada.
Um problema na cadeia de ferramentas Scala.js padrão, que é baseada no SBT e ainda está um pouco em aberto, é: Como incluir dependências, como bibliotecas JavaScript adicionais, em seu projeto? SBT padroniza em WebJars, então você deve usar WebJars para gerenciar suas dependências. Infelizmente, em minha experiência, provou ser inadequado.
O problema com WebJars
Conforme mencionado, a maneira padrão do Scala.js para recuperar dependências do JavaScript é baseada em WebJars. Afinal, Scala é uma linguagem JVM. Scala.js usa SBT para construir programas principalmente e, finalmente, o SBT é excelente no gerenciamento de dependências JAR.
Por este motivo, o formato WebJar foi definido exatamente para importar dependências de JavaScript no mundo JVM. Um WebJar é um arquivo JAR que inclui ativos da web, em que o arquivo JAR simples inclui apenas classes Java compiladas. Portanto, a ideia do Scala.js é que você deve importar suas dependências de JavaScript simplesmente adicionando dependências de WebJar, de forma semelhante ao Scala está adicionando dependências de JAR.
Boa ideia, exceto que não funciona
O maior problema com Webjars é que uma versão arbitrária em uma biblioteca JavaScript aleatória raramente está disponível como um WebJar. Ao mesmo tempo, a grande maioria das bibliotecas JavaScript estão disponíveis como módulos NPM. No entanto, existe uma suposta ponte entre o NPM e os WebJars com um npm-to-webjar automatizado | empacotador. Então tentei importar uma biblioteca, disponível como módulo NPM. No meu caso, foi a VoxelJS, uma biblioteca para construir mundos semelhantes ao Minecraft em uma página da web. Tentei solicitar a biblioteca como um WebJar, mas a ponte falhou simplesmente porque não há campos de licença no descritor.
o retorno sobre o investimento medida de desempenho:
Você também pode enfrentar essa experiência frustrante por outros motivos com outras bibliotecas. Simplificando, parece que você não pode acessar cada biblioteca em estado selvagem como um WebJar. O requisito de usar WebJars para acessar bibliotecas JavaScript parece ser muito limitado.
Digite NPM e Browserify
Como já indiquei, o formato de empacotamento padrão para a maioria das bibliotecas JavaScript é o Node Package Manager, ou NPM, incluído em qualquer versão do Node.js. Usando o NPM, você pode acessar facilmente quase todas as bibliotecas JavaScript disponíveis.
Observe que NPM é Nó gerenciador de pacotes. O Node é uma implementação do lado do servidor do mecanismo JavaScript V8 e instala pacotes a serem usados no lado do servidor pelo Node.js. Como está, o NPM é inútil para o navegador. No entanto, a utilidade do NPM foi estendida um pouco para funcionar com aplicativos de navegador, graças à onipresente ferramenta Browserify, que é claro também distribuída como um pacote NPM.
Browserify é, simplesmente, um empacotador para o navegador. Ele coletará módulos NPM produzindo um “pacote” utilizável em um aplicativo de navegador. Muitos desenvolvedores de JavaScript trabalham dessa forma - eles gerenciam pacotes com o NPM e, posteriormente, fazem o Browserify para usar no aplicativo da web. Lembre-se de que existem outras ferramentas que funcionam da mesma forma, como o Webpack.
Preenchendo a lacuna do SBT ao NPM
Pelos motivos que acabei de descrever, o que eu queria era uma maneira de instalar dependências da web com o NPM, invocar o Browserify para reunir dependências para o navegador e usá-las com Scala.js. A tarefa acabou sendo um pouco mais complicada do que eu esperava, mas ainda possível. Na verdade, eu fiz o trabalho e estou o descrevendo aqui.
Para simplificar, escolhi Browserify também porque descobri que é possível executá-lo dentro do SBT. Não experimentei com o Webpack, embora também ache possível. Felizmente, não tive que começar do nada. Já existem várias peças no lugar:
- O SBT já oferece suporte ao NPM. O
sbt-webO plugin, desenvolvido para o Play Framework, pode instalar dependências NPM. - SBT suporta a execução de JavaScript. Você pode executar as ferramentas do Node sem instalar o próprio Node, graças ao
sbt-jsengineplugar. - Scala.js pode usar um pacote gerado. Em Scala.js, há uma função de concatenação para incluir em seu aplicativo bibliotecas JavaScript arbitrárias.
Usando esses recursos, criei uma tarefa SBT que pode baixar as dependências do NPM e, em seguida, invocar o Browserify, produzindo um bundle.js Arquivo. Tentei integrar o procedimento na cadeia de compilação e posso executar tudo automaticamente, mas ter que processar o empacotamento em cada compilação é simplesmente muito lento. Além disso, você não altera as dependências o tempo todo; portanto, é razoável que você tenha que criar manualmente um bundle de vez em quando ao alterar as dependências.
Então, minha solução foi construir um subprojeto. Este subprojeto baixa e empacota bibliotecas JavaScript com NPM e Browserify. Em seguida, adicionei um bundle comando para realizar a coleta de dependências. O pacote resultante é adicionado aos recursos a serem usados no aplicativo Scala.js.
como codificar com c ++
Você deve executar este “pacote” manualmente sempre que alterar suas dependências de JavaScript. Conforme mencionado, não é automatizado na cadeia de compilação.
Como usar o Bundler
Se você quiser usar meu exemplo, faça o seguinte: primeiro, verifique o repositório com o comando Git usual.
git clone https://github.com/sciabarra/scalajs-browserify/ Em seguida, copie bundle pasta em seu projeto Scala.js. É um subprojeto para empacotamento. Para se conectar ao projeto principal, você deve adicionar as seguintes linhas em seu build.sbt Arquivo:
val bundle = project.in(file('bundle')) jsDependencies += ProvidedJS / 'bundle.js' addCommandAlias('bundle', 'bundle/bundle') Além disso, você deve adicionar as seguintes linhas ao seu project/plugins.sbt Arquivo:
addSbtPlugin('com.typesafe.sbt' % 'sbt-web' % '1.1.1') addSbtPlugin('com.typesafe.sbt' % 'sbt-js-engine' % '1.1.3') Uma vez feito isso, você tem um novo comando, bundle, que você pode usar para reunir suas dependências. Ele irá gerar um arquivo bundle.js sob o seu src/main/resources pasta.
Como o pacote está incluído em seu aplicativo Scala.js?
O bundle O comando que acabamos de descrever reúne dependências com o NPM e, em seguida, cria um bundle.js. Quando você executa o fastOptJS ou fullOptJS comandos, ScalaJS criará um myproject-jsdeps.js, incluindo todos os recursos que você especificou como uma dependência JavaScript, portanto, também seu bundle.js. Para incluir dependências agrupadas em seu aplicativo, você deve usar as seguintes inclusões:
myproject-jsdeps.jsSeu pacote agora está disponível como parte de bundle/package.json. O pacote está pronto e de alguma forma concluímos nossa tarefa (importar dependências e exportá-las para o navegador). O próximo passo é usar as bibliotecas JavaScript, que é um problema diferente, um problema de codificação Scala.js. Para completar, discutiremos agora como usar o pacote em Scala.js e criar fachadas para usar as bibliotecas que importamos.
Usando uma biblioteca JavaScript genérica em seu aplicativo Scala.js
Para recapitular, acabamos de ver como usar o NPM e o Browserify para criar um pacote e incluí-lo no Scala.js. Mas como podemos usar uma biblioteca JavaScript genérica?
O processo completo, que explicaremos em detalhes no restante da postagem, é:
- Selecione suas bibliotecas no NPM e inclua-as no
require. - Carregue-os com
bundle/lib.jsem um arquivo de módulo de biblioteca, emBundle. - Escreva fachadas Scala.js para interpretar o
package.jsonobjeto em Scala.js. - Por fim, codifique seu aplicativo usando as bibliotecas recém-digitadas.
Adicionando uma Dependência
Usando o NPM, você deve incluir suas dependências no npmjs.com arquivo, que é o padrão.
Então, vamos supor que você queira usar duas bibliotecas famosas como jQuery e Loadash. Este exemplo é apenas para fins de demonstração, porque já existe um wrapper excelente para jQuery disponível como uma dependência para Scala.js com um módulo adequado, e Lodash é inútil no mundo Scala. Mesmo assim, acho que é um bom exemplo, mas tome-o apenas como exemplo.
Então, vá para o jquery-browserify site e localize a biblioteca que deseja usar e selecione uma versão também. Suponha que você escolha lodash versão 13.0.0 e dependencies versão 4.3.0. Em seguida, atualize o packages.json bloco do seu 'dependencies': { 'browserify': '13.0.0', 'jquery-browserify': '1.8.1', 'lodash': '4.3.0' } do seguinte modo:
browserifySempre mantenha bundle, pois é necessário para gerar o pacote. No entanto, você não é obrigado a incluí-lo no pacote.
Observe que, se você tiver o NPM instalado, basta digitar npm install --save jquery-browserify lodash diretório:
package.jsonEle também atualizará o bundle. Se você não tem o NPM instalado, não se preocupe. O SBT instalará uma versão Java do Node.js e NPM, baixe os JARs necessários e os executará. Tudo isso é gerenciado quando você executa o require comando do SBT.
Exportando a Biblioteca
Agora sabemos como baixar os pacotes. A próxima etapa é instruir o Browserify a reuni-los em um pacote e torná-los disponíveis para o resto do aplicativo.
Browserify é um coletor de require, emulando o comportamento do Node.js para o navegador, o que significa que você precisa ter em algum lugar um Bundle importando sua biblioteca. Como precisamos exportar essas bibliotecas para Scala.js, o pacote também está gerando um objeto JavaScript de nível superior denominado lib.js. Portanto, o que você precisa fazer é editar o module.exports = { 'jquery': require('jquery-browserify'), 'lodash': require('lodash') } , que exporta um objeto JavaScript, e requer todas as suas bibliotecas como campos desse objeto.
Se quisermos exportar para as bibliotecas jQuery e Lodash Scala.js, no código isso significa:
bundleAgora, basta executar o comando package.json e a biblioteca será baixada, reunida e colocada no pacote, pronta para ser usada em seu aplicativo Scala.js.
Acessando o pacote
Tão longe:
- Você instalou o subprojeto do pacote em seu projeto Scala.js e o configurou corretamente.
- Para qualquer biblioteca desejada, você a adicionou ao
lib.js. - Você os solicitou no
bundle. - Você executou o
Bundlecomando.
Como resultado, você agora tem um @js.native object Bundle extends js.Object { def jquery : js.Any = js.native def lodash: js.Any = js.native } objeto JavaScript de nível superior, fornecendo todos os pontos de entrada para as bibliotecas, disponíveis como campos deste objeto.
Agora você está pronto para usá-lo com Scala.js. No caso mais simples, você pode fazer algo assim para acessar as bibliotecas:
requireEste código permite que você acesse as bibliotecas de Scala.js. No entanto, não é a maneira que você deve fazer com Scala.js, porque as bibliotecas ainda não estão tipadas. Em vez disso, você deve escrever 'fachadas' digitadas, ou wrappers, para que possa usar as bibliotecas JavaScript originalmente não digitadas em um escamoso caminho.
preencha o código em comparável________ c = nova data ()
Não posso dizer aqui como escrever as fachadas, pois depende da biblioteca JavaScript específica que você deseja envolver em Scala.js. Vou apenas mostrar um exemplo, para completar a discussão. Por favor, cheque o documentação oficial do Scala.js para mais detalhes. Além disso, você pode consultar a lista de fachadas disponíveis e leia o código-fonte para se inspirar.
Até agora, cobrimos o processo para bibliotecas arbitrárias, ainda não mapeadas. No resto do artigo, estou me referindo à biblioteca com um Já disponível fachada, então a discussão é apenas um exemplo.
Envolvendo uma API JavaScript em Scala.js
Quando você usa require em JavaScript, você obtém um objeto que pode ser muitas coisas diferentes. Pode ser uma função ou um objeto. Pode até ser apenas uma string ou um booleano, caso em que o jquery é invocado apenas para os efeitos colaterais.
No exemplo que estou fazendo, jquery(). é uma função que retorna um objeto que fornece métodos adicionais. O uso típico é jquery. Isso é uma simplificação, porque $. também permite js.Dynamic uso, mas neste exemplo simplificado, não vou cobrir todos esses casos. Observe em geral, para bibliotecas JavaScript complexas, nem todas as APIs podem ser mapeadas facilmente para tipos Scala estáticos. Você pode precisar recorrer a Bundle fornecendo uma interface dinâmica (sem tipo) para o objeto JavaScript.
Portanto, para capturar apenas o caso de uso mais comum, defini no jquery objeto, def jquery : js.Function1[js.Any, Jquery] = js.native :
@js.native trait Jquery extends js.Object { def text(arg: js.Any): Jquery = js.native } Esta função retornará um objeto jQuery. Uma instância de uma característica é, no meu caso, definida com um único método (uma simplificação, você pode adicionar o seu próprio):
def lodash: Lodash = js.native Para a biblioteca Lodash, modelamos toda a biblioteca como um objeto JavaScript, pois é uma coleção de funções que você pode chamar diretamente:
lodashOnde o @js.native trait Lodash extends js.Object { def camelCase(arg: js.Any): String = js.native } característica é a seguinte (também uma simplificação, você pode adicionar seus métodos aqui):
object Main extends JSApp { def main(): Unit = { import Bundle._ jquery('#title').text(lodash.camelCase('This is a test')) } } Usando essas definições, agora podemos finalmente escrever o código Scala usando as bibliotecas jQuery e Lodash subjacentes, ambas carregadas do NPM e depois navegado :
|_+_|
Você pode verificar o exemplo completo Aqui .
Conclusão
eu sou um Escala do desenvolvedor , e fiquei animado quando descobri Scala.js porque poderia usar a mesma linguagem para o servidor e o cliente. Como o Scala é mais semelhante ao JavaScript do que ao Java, o Scala.js é muito fácil e natural no navegador. Além disso, você também pode usar recursos poderosos do Scala como uma rica coleção de bibliotecas, macros e IDEs poderosos e ferramentas de construção. Outras vantagens principais são que você pode compartilhar o código entre o servidor e o cliente. Existem muitos casos em que esse recurso é útil. Se você usar um transpiler para Javascript como Coffeescript, Babel ou Typescript, não notará muitas diferenças ao usar Scala.js, mas ainda assim existem muitas vantagens. O segredo é pegar o melhor de cada mundo e garantir que funcionem bem juntos.
Relacionado: Por que devo aprender Scala?
