Entrar Ainda não tem acesso?
4
respostas

Variaveis (path) no carregamento de módulos com systemjs

por Mário Heleno Nazareth Santos
| 361.6k xp | 17 posts

Olá. Estruturei meu projeto da seguinte forma:

+ -- client/
    + -- ccs/
    + -- js/
        + -- app-es6/
            + -- controllers/
            + -- models/
            + -- view/
        + -- libs-es6/
                jquery.js
                mylib.js

No arquivo "mylib.js" tenho diversas classes e funções e alguns deles são para tratamento de erros, por exemplo, para impedir que um desenvolvedor não instancie a class View 

import {AbstractClassCannotBeInstantiatedError} from "../../libs-es6/mylib";
export class View {
    constructor(element) {
        AbstractClassCannotBeInstantiatedError.check(this);
        this._element = element;
    }
    // resto do código igual ao do curso
}

Quando eu não uso nenhuma classe da pasta libs-es6, pelo fato de estarem todas dentro da pasta app-es6, não é necessário informar o path "pai" e com isso temos apenas "./{arvore}/arquivo e funciona bem:

import {View} from "./View";
class NegociacoesView extends View {

Na tradução do babel da pasta libs-es6 para a libs (Assim como app-es6 para app) os arquivos gerados na pasta libs ficam com o apontamento "../../libs-es6/mylib". Existe alguma forma de criar um "alias" ou "variavel" que seja substituída no momento do build? Pesquisei sobre "npmjs.com/package/replace "mas não consegui me virar.

Abaixo segue meu package.json

{
  "name": "client",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "sources" : {
    "app" : "js/app-es6 -d js/app --source-maps",
    "libs" : "js/libs-es6 -d js/libs --source-maps"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build-app": "babel %npm_package_sources_app%",
    "build-libs": "babel %npm_package_sources_libs%",
    "build-app-watch": "babel %npm_package_sources_app% --watch",
    "build-libs-watch": "babel %npm_package_sources_libs% --watch",
    "build": "npm run build-libs && npm run build-app",
    "watch": "concurrently --kill-others \"npm run build-libs-watch\" \"npm run build-app-watch\""
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.10.1",
    "babel-preset-es2015": "^6.9.0",
    "concurrently": "^3.4.0"
  },
  "dependencies": {
    "systemjs": "^0.19.31"
  },
}

NOTA: para fazer funcionar alterei os imports como se já estivesse no diretório final de "../../libs-es6/mylib" para: "../../libs/mylib" porém com isso perco link para os arquivos no VS Code.

import {AbstractClassCannotBeInstantiatedError} from "../../libs/mylib";
export class View {
4 respostas
por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Fala Mário tudo bom?

Consegue subir seu projeto no Github e me mandar o link para eu conseguir dar uma solução mais focada no seu projeto? \o

por Mário Heleno Nazareth Santos
| 361.6k xp | 17 posts

Desuclpe a demora. Viagem Segue o projeto no github https://github.com/ssannttoss/forum.aluraframe

import {View} from "./View";

//este é o problema. Veja que referencio o diretório libs-es6. Porém veja mais abaixo a classe "traduzida" referenciando o mesmo diretório sendo que o correto seria apenas lib
import {} from "../../libs-es6/jquery"; 

export class NegociacoesView extends View {

Arquivo gerado (na pasta app)

"use strict";

System.register(["./View", "../../libs-es6/jquery"], function (_export, _context) {
    "use strict";

    var View, _createClass, NegociacoesView;
por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Fala Mário tudo bom?

Nesta linha de código:

//este é o problema. Veja que referencio o diretório libs-es6. Porém veja mais abaixo a classe "traduzida" referenciando o mesmo diretório sendo que o correto seria apenas lib
import {} from "../../libs-es6/jquery";

tente fazer um

import  $ from "../../libs-es6/jquery"

importando somente usando a notação de Objeto, você fica sem uma referência para poder usar.

Espero ter ajudado :)

por Mário Heleno Nazareth Santos
| 361.6k xp | 17 posts

Bem, não era esse o ponto. Após a traspilação o código de destino ainda vai continuar apontando para uma pasta "libs-es6".

System.register(["./View", "../../libs-es6/jquery"], function (_export, _context) { "use strict";

O que eu procuro é uma forma de "ensinar" o transpiler à traduzir também essa string com o diretório. Assim o resultado deveria ser

System.register(["./View", "../../libs/jquery"], function (_export, _context) { "use strict";

Além do jquery eu terei outras libs no diretório libs-es6. Quando à importação da notação de objeto ou usando $, se eu alterar o código transpilado, ajustando o diretório de libs-es6 para libs funciona normalmente.