Importare il modulo AMD esistente nel modulo ES6

Ho un'applicazione esistente in cui sono stati definiti moduli AMD utilizzando RequireJS. Uso estensivamente i plugin "text" e "i18n" per requirejs nel mio progetto. Ultimamente sto sperimentando con i moduli ES6 e vorrei usarli mentre creo nuovi moduli nella mia applicazione. Tuttavia, voglio riutilizzare i moduli AMD esistenti e importarli mentre definisco i miei moduli ES6.Importare il modulo AMD esistente nel modulo ES6

È possibile? So che Traceur e Babel possono creare moduli AMD da moduli ES6, ma funziona solo per nuovi moduli senza dipendenze da moduli AMD esistenti, ma non sono riuscito a trovare un esempio di riutilizzo dei moduli AMD esistenti.

Qualsiasi aiuto sarà apprezzato. Questo è un ostacolo per me in questo momento per iniziare a utilizzare tutte le chicche ES6.

Grazie

fonte

2015-09-27 coderC

"* funziona solo per nuovi moduli senza dipendenze da moduli AMD esistenti *" - perché la pensi così? Se compili AMD e usi requirejs per caricare i tuoi moduli, puoi ancora banalmente richiedere moduli "normali" (non compilati). – Bergi

Sì, come ha detto @Berg, avete intenzione di compilare i vostri moduli ES2015 su qualcosa di diverso da AMD? – JMM

Voglio compilare solo i moduli ES2015 su AMD. Tuttavia, come ho già detto, ho già alcuni moduli AMD che vorrei importare nel mio modulo ES2015 in modo da poterli riutilizzare invece di riscriverli di nuovo. – coderC

Sì, può essere fatto. Creare una nuova applicazione con la seguente struttura:

gulpfile.js 
index.html 
js/foo.js 
js/main.es6 
node_modules

Installare gulp e gulp-babel. (Io preferisco installare gulp livello locale, ma si può decidere a livello globale: questo sta a voi.)

index.html:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Something</title> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.20/require.js"></script> 
    <script> 
    require.config({ 
     baseUrl: "js", 
     deps: ["main"] 
    }); 
    </script> 
</head> 
<body> 
</body> 
</html>

gulpfile.js:

"use strict"; 

var gulp = require('gulp'); 
var babel = require('gulp-babel'); 

gulp.task("copy", function() { 
    return gulp.src(["./js/**/*.js", "./index.html"], { base: '.' }) 
     .pipe(gulp.dest("build")); 
}); 

gulp.task("compile-es6", function() { 
    return gulp.src("js/**/*.es6") 
     .pipe(babel({"modules": "amd"})) 
     .pipe(gulp.dest("build/js")); 
}); 

gulp.task("default", ["copy", "compile-es6"]);

js/foo.js:

define(function() { 
    return { 
     "foo": "the value of the foo field on module foo." 
    }; 
});

js/main.es6:

import foo from "foo"; 

console.log("in main: ", foo.foo);

Dopo aver eseguito gulp per generare l'applicazione, aprire il file build/index.html nel browser. Vedrete sulla console:

in main: the value of the foo field on module foo.

L'ES6 modulo main stato in grado di caricare il modulo AMD foo e utilizzare il valore esportato. Sarebbe anche possibile avere un modulo AMD nativo caricare un modulo ES6 che è stato convertito in AMD. Una volta che Babel ha fatto il suo lavoro, sono tutti moduli AMD per quanto riguarda un caricatore AMD.

fonte

2015-09-27 17:51:13 Louis

Grazie mille per la risposta. Questo funziona per i normali moduli AMD. Comunque, ho usato alcuni plugin RequireJS che hanno il formato che sembra 'require (['text! MyTemplate.tpl'], function (MyTemplate) {});' Come funzionerà questo formato con ES2015? – coderC

Oltre alla risposta di @ Louis, supponendo che tu abbia già un sacco di librerie di terze parti specificate nella configurazione require.js, nei tuoi nuovi moduli ES6, ogni volta che importi un modulo, sia esso amd o es6, dovrai va bene finché si mantiene coerente il nome del modulo importato.Per esempio:

Ecco la gulpfile:

gulp.task("es6", function() { 
    return gulp.src("modules/newFolder//es6/*.js") 
    .pipe(babel({ 
    "presets": ["es2015"], 
    "plugins": ["transform-es2015-modules-amd"] 
    // don't forget to install this plugin 
    })) 
    .pipe(gulp.dest("modules/newFolder/build")); 
});

Ecco il file ES6:

import d3 from 'd3'; 
import myFunc from 'modules/newFolder/es6module' 
// ...

Questo sarà compilato per sth come questo:

define(['d3', 'modules/newFolder/es6module'], function (_d, _myFunc) { 
    'use strict'; 
    // ... 
});

più a lungo come il modulo in define(['d3', 'modules/newFolder/es6module'], ... del file compilato va bene in un file AMD originale, dovrebbe funzionare con sotto l'existi ng require.js setup, come ad esempio comprimere i file, ecc.

In termini di domande @ coderC sui caricatori require.js, stavo usando i18n!nls/lang nei moduli AMD, all'inizio pensavo che sarebbe stata una cosa davvero difficile trovare un alternativa ai caricatori di plugin AMD nei moduli ES6 e sono passato ad altri strumenti di localizzazione come i18next. Ma si è scoperto che va bene per fare questo:

import lang from 'i18n!nls/lang'; 
// import other modules..

perché sarà compilato dal compito sorso di STH come:

define(['d3', 'i18n!nls/lang'], function (_d, _lang) { 
// ....

In questo modo, non ci si deve preoccupare la richiedono .js loader.

In breve, nei moduli ES6, se si desidera utilizzare plug-in/moduli AMD esistenti, è sufficiente assicurarsi che il file compilato sia conforme alla configurazione esistente. Inoltre, è possibile provare anche il bundle di moduli ES6 Rollup per raggruppare tutti i nuovi file ES6.

Spero che questo possa essere utile per coloro che stanno cercando di integrare la sintassi ES6 nel progetto.

fonte

2016-03-09 06:06:42 fengshuo

Importare il modulo AMD esistente nel modulo ES6

risposta

Problemi correlati