將現有的AMD模塊導入ES6模塊

我有一個現有的應用程序，其中使用RequireJS定義了AMD模塊。我在項目中廣泛使用requirejs的「text」和「i18n」插件。我最近一直在試用ES6模塊，並希望在我的應用程序中創建新模塊時使用它們。但是，我想重新使用現有的AMD模塊並在定義ES6模塊時導入它們。將現有的AMD模塊導入ES6模塊

這甚至可能嗎？我知道Traceur和Babel可以從ES6模塊創建AMD模塊，但只適用於不依賴於現有AMD模塊的新模塊，但我找不到一個重用現有AMD模塊的例子。

任何幫助將不勝感激。這是我現在開始使用所有ES6好東西時的攔截器。

謝謝

來源

2015-09-27 coderC

「*僅適用於不依賴於現有AMD模塊的新模塊*」 - 您爲什麼這麼認爲？如果你編譯到AMD並使用requirejs來加載你的模塊，你仍然可以簡單地要求「正常」（未編譯）模塊。 – Bergi

是的，就像@Bergi說的那樣，您是否打算將ES2015模塊編譯爲AMD以外的其他模塊？ – JMM

我想將ES2015模塊編譯爲AMD。但是，正如我所提到的，我已經有一些我想在ES2015模塊中導入的AMD模塊，以便我可以重複使用它們而不是重新寫入它們。 – coderC

是的，它可以做到。具有以下結構創建一個新的應用程序：

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

安裝gulp和gulp-babel。（我喜歡安裝gulp本地，但你可能會在全球希望它：這是給你的。）

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

您已經運行gulp後打造的應用程序，在瀏覽器中打開該文件build/index.html。你會看到在控制檯上：

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

的ES6模塊main能夠加載AMD模塊foo和使用導出值。也可以使用本機AMD模塊加載已轉換爲AMD的ES6模塊。一旦Babel完成其工作，就AMD加載器而言，它們都是AMD模塊。

來源

2015-09-27 17:51:13 Louis

非常感謝您的回覆。這適用於正常的AMD模塊。然而，我一直在使用require（['text！myTemplate.tpl']，函數（MyTemplate）{}）格式的RequireJS插件;'這種格式如何與ES2015協同工作？ – coderC

除了@Louis的回答，假設您已經在require.js配置中指定了一堆第三方庫，在新的ES6模塊中，無論何時導入模塊，都是amd或es6，只要保持導入的模塊名稱一致就可以。例如：

這裏是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")); 
});

這裏是ES6文件：

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

這將被編譯爲某事像這樣：

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

只要由於編譯文件的define(['d3', 'modules/newFolder/es6module'], ...中的模塊在原始的AMD文件中很好，它應該在existi下工作ng require.js設置，如壓縮文件等。

在@ coderC關於require.js加載器的問題中，我在AMD模塊中使用了i18n!nls/lang，起初我認爲找到一個非常複雜的東西替代ES6模塊中的AMD插件加載程序，並且我切換到了其他本地化工具，例如i18next。但事實證明，這沒關係做到這一點：

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

，因爲它會被吞掉的任務被編譯爲某事像：

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

這樣，我們就不必擔心需要.js加載程序。

簡而言之，在ES6模塊中，如果您想使用現有的AMD插件/模塊，您只需確保編譯的文件與現有設置一致。此外，您還可以嘗試ES6模塊捆綁軟件Rollup捆綁所有新的ES6文件。

希望對於那些試圖在項目中集成ES6語法的人有所幫助。

來源

2016-03-09 06:06:42 fengshuo

將現有的AMD模塊導入ES6模塊

回答

相關問題