Importuj istniejący moduł AMD do modułu ES6

Mam istniejącą aplikację, w której mam moduły AMD zdefiniowane przy użyciu RequireJS. Używam wtyczek "text" i "i18n" dla requirejsów szeroko w moim projekcie. Ostatnio eksperymentowałem z modułami ES6 i chciałbym z nich korzystać podczas tworzenia nowych modułów w mojej aplikacji. Jednak chcę ponownie wykorzystać istniejące moduły AMD i zaimportować je podczas definiowania modułów ES6.Importuj istniejący moduł AMD do modułu ES6

Czy to możliwe? Wiem, że Traceur i Babel mogą tworzyć moduły AMD z modułów ES6, ale to działa tylko dla nowych modułów bez zależności od istniejących modułów AMD, ale nie mogłem znaleźć przykładu ponownego użycia istniejących modułów AMD.

Każda pomoc zostanie doceniona. To jest dla mnie blokowanie, aby zacząć używać wszystkich gadżetów ES6.

Dzięki

Źródło

2015-09-27 coderC

"* działa tylko w przypadku nowych modułów bez zależności od istniejących modułów AMD *" - dlaczego tak uważasz? Jeśli kompilujesz do AMD i używasz requirejs do ładowania swoich modułów, wciąż możesz wymagać "normalnych" (nieskompilowanych) modułów. – Bergi

Tak, tak jak powiedział @Bergi, czy planujesz skompilować swoje moduły ES2015 do czegoś innego niż AMD? – JMM

Chcę skompilować moduły ES2015 tylko do AMD. Jednak, jak już wspomniałem, mam już kilka modułów AMD, które chciałbym zaimportować do mojego modułu ES2015, aby móc je ponownie wykorzystać zamiast przepisać je ponownie. – coderC

Tak, można to zrobić. Utwórz nową aplikację o następującej strukturze:

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

Install gulp i gulp-babel. (Wolę zainstalować gulp lokalnie, ale możesz go globalnie: to zależy od ciebie.)

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);

Po uruchomieniu gulp zbudować aplikację, otwórz plik build/index.html w przeglądarce. Zobaczysz na konsoli:

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

ES6 moduł main udało się załadować moduł AMD foo i używać wyeksportowanego wartość. Możliwe byłoby również, że natywny moduł AMD ładuje moduł ES6, który został przekonwertowany na AMD. Gdy Babel wykonał swoją pracę, wszystkie są modułami AMD, jeśli chodzi o program ładujący AMD.

Źródło

2015-09-27 17:51:13 Louis

Dziękuję bardzo za odpowiedź. Działa to w przypadku normalnych modułów AMD. Jednak korzystałem z niektórych wtyczek RequireJS, które mają format, który wygląda jak 'require (['text! MyTemplate.tpl'], function (MyTemplate) {});' W jaki sposób ten format będzie działał z ES2015? – coderC

Oprócz odpowiedzi @ Louisa, zakładając, że masz już bibliotekę stron trzecich określoną w konfiguracji require.js, w nowych modułach ES6, za każdym razem, gdy importujesz moduł, czy to amd czy es6, będzie w porządku, o ile zachowasz spójność nazwy importowanego modułu.Na przykład:

Oto 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")); 
});

Oto plik ES6:

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

ta zostanie skompilowany do sth tak:

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

jak długo ponieważ moduł w define(['d3', 'modules/newFolder/es6module'], ... skompilowanego pliku jest w porządku w oryginalnym pliku AMD, powinien działać z under ng konfiguracja require.js, np. kompresowanie plików itp.

Jeśli chodzi o pytanie @ coderC dotyczące ładowarek require.js, używałam i18n!nls/lang w modułach AMD, początkowo myślałam, że będzie to bardzo trudne. alternatywa dla ładowarek AMD w modułach ES6 i przełączyłem się na inne narzędzia lokalizacyjne, takie jak i18next. Ale okazało się, że to jest w porządku, aby to zrobić:

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

ponieważ zostanie on opracowany przez zadania haustem do sth jak:

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

ten sposób nie musimy się martwić o require .js loader.

W skrócie, w modułach ES6, jeśli chcesz użyć istniejącej wtyczki/modułów AMD, wystarczy upewnić się, że skompilowany plik jest zgodny z istniejącą konfiguracją. Ponadto można wypróbować moduł ES6 do pakowania modułów Rollup, aby spakować wszystkie nowe pliki ES6.

Mam nadzieję, że może to być pomocne dla tych, którzy próbują zintegrować składnię ES6 w projekcie.

Źródło

2016-03-09 06:06:42 fengshuo

Importuj istniejący moduł AMD do modułu ES6

Odpowiedz

Powiązane problemy