Nhập mô-đun AMD hiện có vào mô-đun ES6

Tôi có một ứng dụng hiện có nơi tôi có các mô-đun AMD được xác định bằng cách sử dụng RequireJS. Tôi sử dụng "văn bản" và "i18n" plugin cho requirejs rộng rãi trong dự án của tôi. Gần đây tôi đã thử nghiệm với các mô-đun ES6 và muốn sử dụng chúng trong khi tạo mô-đun mới trong ứng dụng của tôi. Tuy nhiên, tôi muốn sử dụng lại các mô-đun AMD hiện có và nhập chúng trong khi xác định các mô-đun ES6 của tôi.Nhập mô-đun AMD hiện có vào mô-đun ES6

Điều này có thể thực hiện được không? Tôi biết Traceur và Babel có thể tạo các mô-đun AMD từ các mô-đun ES6, nhưng nó chỉ hoạt động cho các mô-đun mới mà không phụ thuộc vào các mô-đun AMD hiện có, nhưng tôi không thể tìm thấy ví dụ về việc sử dụng lại các mô-đun AMD hiện có.

Mọi trợ giúp sẽ được đánh giá cao. Đây là một trình chặn cho tôi ngay bây giờ để bắt đầu sử dụng tất cả các tính năng ES6.

Cảm ơn

Nguồn

2015-09-27 coderC

"* chỉ hoạt động đối với các mô-đun mới không phụ thuộc vào các mô-đun AMD hiện tại *" - tại sao bạn nghĩ vậy? Nếu bạn biên dịch sang AMD và sử dụng requirejs để tải các mô-đun của mình, bạn vẫn có thể yêu cầu các mô-đun "bình thường" (chưa được biên dịch) một cách bình thường. – Bergi

Vâng, như @Bergi đã nói, bạn có dự định biên dịch các mô-đun ES2015 của mình thành một thứ khác ngoài AMD không? – JMM

Tôi chỉ muốn biên dịch các mô-đun ES2015 cho AMD. Tuy nhiên, như tôi đã đề cập, tôi đã có một số mô-đun AMD mà tôi muốn nhập trong mô-đun ES2015 của mình để tôi có thể sử dụng lại chúng thay vì viết lại chúng. – coderC

Có, nó có thể được thực hiện. Tạo một ứng dụng mới với cấu trúc sau:

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

Install gulp và gulp-babel. (Tôi thích để cài đặt gulp tại địa phương nhưng bạn có thể muốn nó trên toàn cầu: đó là tùy thuộc vào bạn.)

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

Sau khi bạn đã chạy gulp để xây dựng các ứng dụng, mở file build/index.html trong trình duyệt của bạn. Bạn sẽ thấy trên giao diện điều khiển:

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

Các ES6 mô-đun main đã có thể nạp module AMD foo và sử dụng giá trị xuất khẩu. Nó cũng sẽ có thể có một mô-đun gốc AMD tải một mô-đun ES6 đã được chuyển đổi sang AMD. Một khi Babel đã thực hiện công việc của mình, họ là tất cả các mô-đun AMD xa như một bộ tải AMD có liên quan.

Nguồn

2015-09-27 17:51:13 Louis

Cảm ơn bạn rất nhiều vì đã trả lời. Điều này làm việc cho các mô-đun AMD bình thường. Tuy nhiên, tôi đã sử dụng một số plugin RequireJS có định dạng giống như 'require (['text! MyTemplate.tpl'], hàm (MyTemplate) {});' Định dạng này sẽ hoạt động như thế nào với ES2015? – coderC

Ngoài câu trả lời của @ Louis, giả sử bạn đã có một loạt thư viện của bên thứ ba được chỉ định trong cấu hình require.js, trong mô-đun ES6 mới của bạn, bất cứ khi nào bạn nhập mô-đun, có thể là amd hoặc es6, bạn sẽ được miễn là bạn giữ tên mô-đun được nhập phù hợp.Ví dụ:

Đây là 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")); 
});

Dưới đây là file es6:

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

này sẽ được biên dịch để sth như thế này:

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

miễn vì mô-đun trong define(['d3', 'modules/newFolder/es6module'], ... của tệp được biên dịch là tốt trong tệp AMD ban đầu, nó sẽ hoạt động với dưới existi ng require.js thiết lập, chẳng hạn như nén tệp, v.v.

Về câu hỏi của @ coderC về trình tải require.js, tôi đã sử dụng i18n!nls/lang trong các mô-đun AMD, lúc đầu tôi nghĩ rằng đó sẽ là một điều thực sự phức tạp để tìm thay thế các trình tải plugin của AMD trong các mô-đun ES6 và tôi đã chuyển sang các công cụ bản địa hóa khác như i18next. Nhưng hóa ra rằng nó không quan trọng để làm điều này:

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

bởi vì nó sẽ được biên soạn bởi nhiệm vụ ngụm để sth như:

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

Bằng cách này, chúng ta không cần phải lo lắng về việc yêu cầu .js loader.

Tóm lại, trong các mô-đun ES6, nếu bạn muốn sử dụng các plugin/mô-đun AMD hiện có, bạn chỉ cần đảm bảo tệp được biên dịch phù hợp với thiết lập hiện có. Ngoài ra, bạn cũng có thể thử trình bao gói mô-đun ES6 Rollup để gói tất cả các tệp ES6 mới.

Hy vọng điều này có thể hữu ích cho những người đang cố gắng tích hợp cú pháp ES6 trong dự án.

Nguồn

2016-03-09 06:06:42 fengshuo

Nhập mô-đun AMD hiện có vào mô-đun ES6

Trả lời

Các vấn đề liên quan