All geek questions in one place

Import an existing AMD module into an ES6 module

I have an existing application in which I have AMD modules installed using RequireJS . I use plugins "text" and "i18n" for significant queries in my project. Recently, I experimented with ES6 modules and would like to use them when creating new modules in my application. However, I want to reuse existing AMD modules and import them when defining my ES6 modules.

Is it possible? I know that Traceur and Babel can create AMD modules from ES6 modules, but this only works for new modules that are not dependent on existing AMD modules, but I could not find an example of reusing existing AMD modules.

Any help would be appreciated. This is a blocker for me right now to start using all the benefits of ES6.

thanks

+7
source share
3 answers

Yes, it can be done. Create a new application with the following structure:

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

Install gulp and gulp-babel . (I prefer to install gulp locally, but you may want to install it globally: it is up to you.)

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

After running gulp to create the application, open the build/index.html file in your browser. You will see on the console:

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

The ES6 main module was able to load the AMD foo module and use the exported value. It would also be possible for the native-AMD module to load the ES6 module, which was converted to AMD. After Babel has completed its work, all AMD modules are applicable to the AMD bootloader.

+4
source

In addition to @Louis answer, assuming you already have a group of third-party libraries specified in the require.js configuration in your new ES6 modules, whenever you import a module, be it amd or es6, you'll be while you keep the name of the imported module consistent. For instance:

Here is the 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")); });

Here is the es6 file:

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

This will compile like this:

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

while the module in define(['d3', 'modules/newFolder/es6module'], ... compiled file is fine in the original AMD file, it should work with the existing require.js installation, for example, compress files, etc.

Regarding the @coderC question about require.js loaders, I used i18n!nls/lang in AMD modules, at first I thought it would be very difficult to find an alternative plugins for AMD plugins in ES6 modules, and I switched to other localization tools, such like i18next . But it turned out that everything is in order:

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

because it will be compiled using the gulp task to:

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

Thus, we do not need to worry about the require.js loader.

In a nutshell, in ES6 modules, if you want to use existing AMD plugins / modules, you just need to make sure that the compiled file matches the existing setting. Alternatively, you can try connecting the ES6 Rollup module to link all new ES6 files.

Hope this will be useful for anyone trying to integrate ES6 syntax into a project.

+2
source

A few changes for the latest version of babel:

Firstly, babel({"modules": "amd"}) does not work with the latest version of babel. Instead, use babel({"plugins": ["@babel/plugin-transform-modules-amd"]}) . (You need to install this plugin as a separate module in npm, i.e. with npm install --save-dev @babel/plugin-transform-modules-amd .)

Secondly, the syntax for gulp.task no longer accepts arrays as the second argument. Instead, use gulp.parallel or gulp.series to create a composite task.

Your gulpfile will look something like this:

 "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({"plugins": ["@babel/plugin-transform-modules-amd"]})) .pipe(gulp.dest("build/js")); }); gulp.task("default", gulp.parallel("copy", "compile-es6"));
0
source

Source: https://habr.com/ru/post/1232385/

More articles:


All Articles