Modul ES6 Transpiling ke AMD & Commonjs Menggunakan Babel & Gulp

mata teras

ECMAScript 6 (ES6) telah membuat banyak penambahbaikan kepada JavaScript untuk lebih sesuai dengan skala penggunaan semasa, termasuk keupayaan untuk memuatkan bahagian -bahagian yang berlainan dalam aplikasi dalam bentuk modul. Walau bagaimanapun, tidak semua pelayar telah melaksanakan semua ciri ES6, dan di sinilah penterjemah seperti Babel dan Traceur dimainkan.
Babel dan Gulp boleh digunakan untuk menterjemahkan modul ES6 ke dalam CommonJs atau AMD, membolehkan mereka dibaca oleh pelayar hari ini. Proses ini melibatkan menggunakan tugas Babel's Gulp untuk menukar modul menjadi salah satu sistem modul yang sedia ada, dan kemudian bungkusan aplikasi ke dalam satu fail untuk penyemak imbas untuk digunakan.
Commonjs adalah sistem modul segerak yang digunakan oleh node.js, yang memuat modul menggunakan fungsi yang diperlukan dan mengeksportnya menggunakan sifat eksport objek modul. Menukar modul ES6 ke CommonJs melibatkan penggunaan gabungan Babel, Browserify, dan Gulp.
Sistem Definisi Modul Async (AMD) membolehkan modul bergantung berganda untuk dimuatkan selari. Untuk menukar modul ES6 ke AMD, kami menggunakan Babel, Requirejs, dan Gulp. Anda kemudiannya boleh merujuk skrip akhir secara langsung pada halaman index.html dan melihatnya dalam penyemak imbas.

ECMASCRIPT 6 (AKA ECMASCRIPT 2015 atau ES6), spesifikasi untuk versi JavaScript seterusnya telah diluluskan dan vendor penyemak imbas sedang berusaha untuk melaksanakannya. Tidak seperti versi sebelumnya ECMAScript, ES6 telah membuat perubahan besar kepada bahasa, yang membolehkannya menyesuaikan diri dengan skala penggunaan hari ini. SitePoint mempunyai beberapa artikel yang meliputi ciri -ciri ini.

Walaupun penyemak imbas belum melaksanakan semua ciri -ciri, kami masih boleh memanfaatkan ES6 semasa pembangunan dan menukar aplikasi menjadi versi yang dapat difahami oleh penyemak imbas sebelum menyampaikannya. Babel dan Traceur adalah dua penterjemah terkemuka yang digunakan untuk tujuan ini. Jenis JavaScript Microsoft JavaScript SuperSet Typescript juga boleh digunakan sebagai penterjemah ES6.

Dalam artikel sebelumnya, saya menjelaskan cara menggunakan ES6 untuk menulis aplikasi Sudut 1.x. Dalam jawatan itu, saya menggunakan penterjemah segera Traceur untuk menjalankan aplikasi. Walaupun ia berfungsi, sebaiknya diterjemahkan terlebih dahulu dan mengurangkan jumlah kerja yang perlu dilakukan dalam penyemak imbas. Dalam artikel ini, kita akan melihat bagaimana untuk menterjemahkan aplikasi sampel yang sama ke ES5 dan menukar modul ke Commonjs atau AMD, menggunakan Babel untuk membolehkannya dijalankan pada penyemak imbas hari ini. Walaupun contohnya berdasarkan sudut, teknik terjemahan boleh digunakan untuk sebarang kod ES6 yang sah.

Seperti biasa, anda boleh mencari kod yang disertakan untuk artikel ini dalam repositori GitHub kami.

kepentingan modul

Dalam mana -mana bahasa yang digunakan untuk menulis aplikasi besar, ciri utama adalah keupayaan untuk memuatkan bahagian yang berlainan dalam aplikasi dalam bentuk modul. Modul bukan sahaja membantu menjadikan kod lebih ringkas, tetapi juga memainkan peranan dalam mengurangkan penggunaan skop global. Kandungan modul tidak diberikan kepada mana -mana modul lain melainkan ia dimuatkan secara eksplisit.

Kepentingan modul tidak terhad kepada aplikasi. Malah perpustakaan JavaScript yang besar boleh menggunakan sistem modul untuk mengeksport objek mereka sebagai modul, dan aplikasi menggunakan perpustakaan ini boleh mengimport modul ini seperti yang diperlukan. Angular 2 dan Aurelia telah mula menggunakan ciri ini.

Jika anda ingin melihat dengan cepat cara menggunakan modul dalam ES6, baca: Memahami modul ES6

mengenai aplikasi sampel

Tema aplikasi sampel kami adalah rak buku maya. Ia mengandungi halaman berikut:

1. Laman Utama: Memaparkan senarai buku aktif yang boleh ditandakan sebagai dibaca atau dipindahkan ke arkib.
2. Tambah halaman buku: Tambah buku baru ke rak buku dengan menerima tajuk buku dan nama pengarang. Ia tidak membenarkan tajuk pendua.
3. Halaman arkib: Senaraikan semua buku yang diarkibkan.

Aplikasi ini dibina menggunakan AngularJS 1.3 dan ES6. Jika anda melihat sebarang fail dalam folder aplikasi, anda akan melihat Eksport dan Import Kata Kunci untuk mengeksport objek dari modul semasa dan mengimport objek dari modul lain. Sekarang, tugas kami adalah untuk menukar modul ini menjadi salah satu sistem modul yang sedia ada menggunakan tugas Babel's Gulp.

tetapi saya tidak menggunakan sudut. Saya hanya mahu menukar modul ES6 ke Commonjs/AMD

Jangan risau! Kami bersedia untuk anda. Dengan hanya sedikit tweaking, resipi yang ditunjukkan di bawah boleh digunakan pada mana -mana projek yang melibatkan modul ES6. Sudut tidak penting di sini.

Tukar ke Commonjs

CommonJS adalah sistem modul yang ditakrifkan oleh kumpulan Commonjs. Ia adalah sistem modul segerak di mana modul dimuatkan menggunakan fungsi yang diperlukan dan modul dieksport menggunakan sifat eksport objek modul. Objek modul harus tersedia dalam semua modul secara lalai.

node.js menggunakan sistem modul ini, jadi ia secara asli mentakrifkan objek modul dan memberikannya kepada aplikasi anda. Oleh kerana penyemak imbas tidak menentukan objek ini, kita perlu menggunakan utiliti yang dipanggil Browserify untuk mengisi jurang.

kita juga perlu memasang beberapa pakej NPM sebelum kita mula. Ini akan membolehkan kami menggunakan Babel dan Browserify dengan Gulp untuk menukar modul ES6 kami menjadi salah satu format modul biasa dan membungkus aplikasi sebagai satu fail untuk penyemak imbas untuk digunakan.

• Gulp-Babel-Tukar kod ES6 ke Normal ES5
• BROWSERIFY - membolehkan anda memerlukan ('modul') dalam penyemak imbas anda dengan menggabungkan semua kebergantungan
• Vinyl-Source-Stream-Mengendalikan modul BROWSERIFY secara langsung untuk mengelakkan keperluan untuk pembungkus Gulp-Browserify
• vinyl-buffer-menukar aliran ke buffer (perlu untuk gulp-uglify yang tidak menyokong aliran)
• Gulp-uglify-Fail termampat
• del - membolehkan anda memadam fail dan folder
• Gulp-Rename-Plugin yang membolehkan anda menamakan semula fail

anda boleh mendapatkan semua ini dengan menaip:

<code>npm install gulp-babel browserify gulp-browserify vinyl-source-stream vinyl-buffer gulp-uglify del gulp-rename --save-dev</code>

Sekarang mari kita mulakan menggunakan pakej ini dalam gulpfile.js kami. Kita perlu menulis tugas untuk mendapatkan semua fail ES6 dan menyampaikannya kepada Babel. Sistem modul lalai di Babel adalah CommonJs, jadi kami tidak perlu menghantar sebarang pilihan kepada fungsi Babel.

<code>var babel = require('gulp-babel'),
    browserify = require('browserify'),
    source = require('vinyl-source-stream'),
    buffer = require('vinyl-buffer'),
    rename = require('gulp-rename'),
    uglify = require('gulp-uglify'),
    del = require('del');

gulp.task('clean-temp', function(){
  return del(['dest']);
});

gulp.task('es6-commonjs',['clean-temp'], function(){
  return gulp.src(['app/*.js','app/**/*.js'])
    .pipe(babel())
    .pipe(gulp.dest('dest/temp'));
});
</code>

Harap tidak ada yang terlalu membingungkan di sini. Kami mengisytiharkan tugas yang dipanggil ES6-CommonJS yang mendapat sebarang fail JavaScript dalam direktori aplikasi dan mana-mana subdirektori. Ia kemudian melewati mereka melalui Babel, yang seterusnya menukar fail individu ke modul ES5 dan CommonJS dan menyalin fail yang ditukar ke folder DEST/TEMP. Tugas ES6-CommonJS mempunyai kebergantungan yang dipanggil Clean-Temp yang akan memadam direktori DEST dan sebarang fail di dalamnya sebelum tugas ES6-CommonJS berjalan.

Jika anda ingin membuat kod lebih jelas dan tentukan sistem modul, anda boleh mengubahsuai penggunaan Babel seperti berikut:

<code>.pipe(babel({
  modules:"common"
}))
</code>

3 Coretan kod berikut menunjukkan ini:

<code>gulp.task('bundle-commonjs-clean', function(){
  return del(['es5/commonjs']);
});

gulp.task('commonjs-bundle',['bundle-commonjs-clean','es6-commonjs'], function(){
  return browserify(['dest/temp/bootstrap.js']).bundle()
    .pipe(source('app.js'))
    .pipe(buffer())
    .pipe(uglify())
    .pipe(rename('app.js'))
    .pipe(gulp.dest("es5/commonjs"));
});
</code>

Tugas di atas mempunyai dua kebergantungan: yang pertama adalah tugas bundle-commonjs-clean, yang akan memadamkan direktori ES5/Commonjs; Selepas tugas -tugas ini dijalankan, tugas itu meletakkan app.js fail gabungan dan dimampatkan ke dalam folder ES5/CommonJS. Fail ini boleh dirujuk secara langsung dalam index.html dan halaman boleh dilihat dalam penyemak imbas.

Akhirnya, kita boleh menambah tugas untuk memulakan operasi:

<code>gulp.task('commonjs', ['commonjs-bundle']);
</code>

Tukar ke AMD

sistem definisi modul async (AMD), seperti namanya, adalah sistem pemuatan modul tak segerak. Ia membolehkan pelbagai modul bergantung dimuatkan selari, dan ia tidak menunggu satu modul untuk dimuat sepenuhnya sebelum cuba memuatkan modul lain.

memerlukan.js adalah perpustakaan yang digunakan untuk mengendalikan AMD. MemerlukanJS boleh didapati melalui Bower:

<code>bower install requirejs --save</code>

Kami juga memerlukan plugin Gulp yang memerlukan.js untuk membungkus aplikasi. Untuk melakukan ini, pasangkan pakej NPM Gulp-Requirejs.

<code>npm install gulp-requirejs --save-dev</code>

Sekarang, kita perlu menulis tugas yang menukarkan kod ES6 ke ES5 dan AMD dan kemudian mengundurkannya dengan memerlukan. Tugas -tugas ini sangat mirip dengan yang dicipta di bahagian Commonjs.

<code>var requirejs = require('gulp-requirejs');

gulp.task('es6-amd',['clean-temp'], function(){
    return gulp.src(['app/*.js','app/**/*.js'])
    .pipe(babel({ modules:"amd" }))
    .pipe(gulp.dest('dest/temp'));
});

gulp.task('bundle-amd-clean', function(){
  return del(['es5/amd']);
});

gulp.task('amd-bundle',['bundle-amd-clean','es6-amd'], function(){
  return requirejs({
    name: 'bootstrap',
    baseUrl: 'dest/temp',
    out: 'app.js'
  })
  .pipe(uglify())
  .pipe(gulp.dest("es5/amd"));
});

gulp.task('amd', ['amd-bundle']);
</code>

Untuk menggunakan skrip akhir pada halaman index.html, kita perlu menambah rujukan kepada memerlukan, skrip yang dihasilkan, dan kemudian memuatkan modul bootstrap. Fail bootstrap.js di dalam folder apl Boots aplikasi AngularJS, jadi kita perlu memuatkannya untuk memulakan aplikasi AngularJS.

<code> src="bower_components/requirejs/require.js" >>
 src="es5/amd/app.js">>
>
  (function(){
    require(['bootstrap']);
  }());
>
</code>

Kesimpulan Modul

adalah ciri yang JavaScript telah lama kekurangan. Mereka akan muncul dalam ES6, tetapi malangnya, sokongan penyemak imbas asli mereka sekarang adalah miskin. Tetapi itu tidak bermakna anda tidak boleh menggunakannya hari ini. Dalam tutorial ini, saya menunjukkan cara menukar modul ES6 ke format CommonJs dan AMD yang boleh dijalankan di penyemak imbas menggunakan Gulp, Babel, dan pelbagai plugin.

Bagi ES6? Sejak pembebasannya, ES6 telah mendapat banyak perhatian dalam masyarakat. Ia telah digunakan oleh pemalam JavaScript termasuk Bootstrap, Aurelia, Angular 2, dan banyak lagi perpustakaan atau kerangka JavaScript. Typescript juga menambah sokongan untuk beberapa ciri ES6, termasuk modul. Belajar dan menggunakan ES6 hari ini akan mengurangkan usaha yang diperlukan untuk menukar kod pada masa akan datang.

FAQs (FAQs) untuk menterjemahkan modul ES6 ke AMD dan CommonJs menggunakan Babel dan Gulp

Apakah tujuan menggunakan Babel dan Gulp untuk menterjemahkan modul ES6 ke dalam AMD dan Commonjs?

Menggunakan Babel dan Gulp untuk menterjemahkan modul ES6 ke dalam AMD dan CommonJS adalah proses yang membolehkan pemaju menulis kod menggunakan versi terkini JavaScript (ES6) dan kemudian mengubahnya menjadi versi yang dapat difahami oleh pelbagai enjin JavaScript. Ini amat berguna kerana tidak semua pelayar atau persekitaran menyokong ciri -ciri ES6 terkini. Dengan menterjemahkan kod, pemaju dapat memastikan bahawa aplikasi mereka berjalan lancar pada platform yang berbeza.

Bagaimana Babel membantu menterjemahkan modul ES6?

Babel adalah pengkompil JavaScript yang digunakan terutamanya untuk menukar kod ECMAScript 2015 (ES6) ke dalam versi JavaScript yang bersesuaian yang boleh dijalankan oleh enjin JavaScript yang lebih tua. Apabila menterjemahkan modul ES6, Babel menyediakan plugin seperti "Babel-Plugin-Transform-Modul-Commonjs" yang menukar sintaks modul ES6 ke sintaks CommonJS yang disokong secara meluas.

Apakah peranan yang dimainkan oleh Gulp dalam proses terjemahan?

Gulp adalah pelari tugas yang boleh digunakan untuk mengautomasikan proses terjemahan. Ia boleh dikonfigurasikan untuk memantau sebarang perubahan dalam fail ES6 dan secara automatik menjalankan penterjemah Babel di atasnya. Ini membolehkan pemaju untuk menjalankan penterjemah secara manual setiap kali mereka menukar kod.

Bolehkah saya menerjemahkan modul ES6 ke AMD dan bukannya CommonJs?

Ya, anda boleh menterjemahkan modul ES6 ke dalam definisi modul tak segerak (AMD) dan bukannya CommonJs. Babel menyediakan plugin yang dipanggil "Babel-Plugin-Transform-Modul-AMD" untuk tujuan ini. AMD amat berguna apabila berurusan dengan sejumlah besar modul dalam persekitaran pelayar web.

Apakah perbezaan antara AMD dan Commonjs?

AMD dan CommonJs adalah kedua -dua format modul. Perbezaan utama di antara mereka adalah bagaimana mereka mengendalikan kebergantungan. AMD menyokong pemuatan tak segerak kebergantungan, yang dapat meningkatkan prestasi dalam persekitaran penyemak imbas. Commonjs, sebaliknya, memuatkan kebergantungan secara serentak, yang lebih mudah dan berfungsi dengan baik dalam persekitaran pelayan seperti node.js.

Bagaimana untuk menentukan ciri ES6 yang akan diterjemahkan?

Babel Gunakan fail konfigurasi bernama .babelrc (atau babel.config.js), di mana anda boleh menentukan fungsi ES6 yang akan diterjemahkan. Anda boleh menyenaraikan plugin atau pratetap untuk digunakan dalam fail ini. Sebagai contoh, untuk menterjemahkan modul ES6, anda akan memasukkan "Babel-Plugin-Transform-Modul-Commonjs" atau "Babel-Plugin-Transform-Modul-AMD" dalam konfigurasi.

Apakah faedah menggunakan modul ES6?

modul ES6 membawa banyak manfaat kepada pembangunan JavaScript. Mereka memperkenalkan sintaks standard untuk mengimport dan mengeksport fungsi, objek, atau nilai dari modul, yang boleh menjadikan kod anda lebih teratur dan boleh diurus. Mereka juga menyokong analisis statik, yang meningkatkan prestasi dan menangkap kesilapan pada masa kompilasi dan bukannya runtime.

Bagaimana cara debug kod terjemahan?

Debugging kod terjemahan boleh mencabar kerana kod yang dilaksanakan adalah berbeza daripada yang anda tulis. Walau bagaimanapun, Babel menyediakan penyelesaian kepada masalah ini melalui bentuk pemetaan sumber. Peta sumber adalah fail yang memetakan kod yang diterjemahkan kembali ke kod sumber asal, yang membolehkan anda debug kod seperti yang menjalankan kod ES6 asal.

Bolehkah saya menggunakan Babel dan Gulp dengan kerangka JavaScript yang lain?

Ya, Babel dan Gulp tidak terikat kepada mana -mana rangka kerja JavaScript tertentu. Mereka boleh digunakan dengan mana-mana rangka kerja ES6 yang dibolehkan, termasuk React, Angular, Vue.js, dan banyak lagi.

Adakah terdapat alternatif untuk Babel dan Gulp untuk terjemahan modul ES6?

Ya, terdapat beberapa alternatif untuk Babel dan Gulp yang boleh digunakan untuk menterjemahkan modul ES6. Ini termasuk TypeScript, Traceur, dan Rollup. Alat ini masing -masing mempunyai kebaikan dan keburukan mereka, jadi pilihan terbaik bergantung pada keperluan dan keutamaan khusus anda.

Atas ialah kandungan terperinci Modul ES6 Transpiling ke AMD & Commonjs Menggunakan Babel & Gulp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!