Rumah >hujung hadapan web >tutorial js >Memahami Modul JavaScript: Bundling & Transpiling

Memahami Modul JavaScript: Bundling & Transpiling

Christopher Nolanasal: 2025-02-18 08:35:10975semak imbas

Understanding JavaScript Modules: Bundling & Transpiling <script> </script> $ (function () {...});

Kod aplikasi anda sendiri biasanya disesuaikan di bawah aplikasi seperti global untuk mengelakkan mencemarkan skop global. Tanpa ini hanya lama sebelum anda mempunyai perlanggaran nama dan perkara -perkara yang hancur.

<span>var App = {};
</span><span>App.<span>Models</span> = {};
</span><span>App.<span>Models</span>.<span>Note</span> = function() {};
</span>

Masa Depan

Objek eksport perpustakaan dalam format modul biasa (modul ES6).

<span>export default function $() { ... }
</span>

Kami mengimport modul ke dalam skop tempatan dan menggunakannya.

<span>import $ from 'jquery';
</span>
<span>$(function() { ... });
</span>

tidak diperlukan global?
Kemerdekaan Perintah Sumber
Akses ke NPM
tidak perlu ruang nama kod aplikasi anda sendiri
Modul beban dinamik pada bila -bila masa seperti yang diperlukan

sekarang

Ia benar -benar benar -benar rumit. Pertama, terdapat pelbagai format modul di luar sana yang digunakan:

commonjs
AMD
umd

alat untuk aset bundling datang dalam pelbagai bentuk dan saiz:

jspm

Webpack

rollup

Brunch / Brocolli

Sprockets

Bina sendiri dengan Gulp / Grunt

maka ada transpil yang mungkin anda mahu gunakan:

Babel untuk ES6

Coffeescript
TypeScript

memerlukan.js

System.js

mari kita menyatukan perkakas pada tahun 2016

Pemaju front-end telah menggunakan alat binaan untuk masa yang sangat lama tetapi hanya dalam beberapa tahun kebelakangan yang kita telah melihat langkah membina menjadi norma. Alat seperti sass dan coffeescript membantu membuat arus perdana pra-pemprosesan tetapi momentum sekitar ES6 kini telah mendapat semua orang di atas kapal.

Komuniti JavaScript membuat beberapa peningkatan hebat pada tahun 2015, tetapi kita perlu menyatukan perkakas pada 2016.https: //t.co/hgrljisqhb- Nicolás Bevacqua (@nzgb) 8 Januari 2016

Saya setuju.

Gulp dan Grunt telah sangat popular dalam beberapa tahun kebelakangan ini, alat -alat ini membolehkan anda menulis satu siri transformasi untuk paip aset anda melalui. Mereka telah digunakan untuk memberi kesan yang besar dan masih popular, walaupun banyak orang memilih untuk menggunakan alat secara langsung melalui NPM - lihat mengapa saya meninggalkan Gulp dan Grunt untuk skrip NPM dan panduan untuk menggunakan NPM sebagai alat binaan.

secara peribadi, saya tidak peduli untuk membina saluran paip aset lagi, apa yang saya cari adalah alat konfigurasi minimum yang membolehkan saya menggunakan perkakas moden seperti yang diperlukan: perkara seperti sass, autoprefixer, babel dan coffeeescript, modul yang betul Sistem dan loader tanpa perlu bimbang tentang pelaksanaan, konfigurasi dan penyelenggaraan yang berterusan. Pada dasarnya, setiap pemaju telah melabur masa untuk mewujudkan saluran paip aset sejak beberapa tahun kebelakangan ini, itu banyak penciptaan semula roda dan banyak jam yang sia-sia.

Komuniti dibahagikan kepada alat seperti Browserify, Webpack, JSPM, Sprockets dan Gulp. Itu bukan masalah, ia hanya mengelirukan untuk semua orang yang cuba memahami jalan yang jelas ke hadapan.

titik permulaan yang jelas

Ada beberapa perkara yang boleh kita persetujui:

modul ES2015 adalah format modul masa depan yang benar untuk JavaScript.

Babel adalah penyusun pilihan ES2015 hari ini.

pemuat asli masih seketika daripada yang tersedia dalam pelayar, laporan mengenai masa depan JavaScript oleh Telerik mencadangkan bahawa sokongan ES2015 lengkap boleh mengambil masa lebih dari dua tahun memandangkan modul memuatkan halangan.

Jika anda mahu menggunakan modul sekarang, kemungkinan besar akan melibatkan commonjs pada satu ketika.

Mari kita lihat apa persediaan konfigurasi minimum seperti menggunakan Browserify, Webpack dan JSPM, ini adalah bundlers JavaScript yang paling penting untuk mengetahui hari ini.
Projek baru
var App = {};
App.Models = {};
App.Models.Note = function() {};

kemas kini index.html dalam editor teks kegemaran anda
export default function $() { ... }

Kami juga memerlukan pelayan untuk menjalankan kod-contohnya pelayan langsung yang merupakan pelayan HTTP sifar kecil yang hebat dengan keupayaan tambah nilai secara langsung. Pasangnya secara global dengan NPM Install -g Live-Server dan jalankan pelayan langsung dari Root Projek untuk memulakan.

BROWSERIFY
BROWSERIFY membolehkan anda memerlukan ('modul') dalam penyemak imbas dengan menggabungkan semua kebergantungan anda.

Buka src/lib.js dan tambahkan modul pertama kami.

Buka src/entry.js dan kami akan memerlukan modul kami dan menggunakannya.
import $ from 'jquery'; $(function() { ... }); 

Kemas kini bahagian skrip dalam pakej.json
mkdir modules-app cd modules-app npm init -y npm install --save-dev browserify webpack jspm mkdir src touch src/{entry,lib}.js index.html 

Jalankan skrip ini dengan NPM Run Browserify
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Modules!</title> </head> <body> <script src="bundle.js"></script> </body> </html> 

BROWSERIFY akan membuat bundle.js dalam root projek dan anda harus melihat output 4 yang paling keluar ke konsol. Untuk mengetahui lebih lanjut mengenai apa yang sedang dilakukan oleh Browserify dan bagaimana bundle ini dibuat saya cadangkan menonton Pengenalan kepada BROWSERIFY di egghead.io

Tahniah! Kami kini mempunyai modul dalam penyemak imbas! ?

Satu lagi manfaat utama Browserify adalah bahawa ia memberi anda akses bukan sahaja kepada modul yang anda pengarang, tetapi juga modul NPM, mari pasang Lodash untuk melihat.

edit src/lib.js
var double = function(number) { return number * 2; } module.exports = { double: double } 

edit src/entry.js dan hubungi fungsi addfive baru kami
var lib = require('./lib.js'); console.log(lib.double(2)); 

var App = {}; App.Models = {}; App.Models.Note = function() {}; 

Buat bundle lagi dengan NPM Run Browserify dan dalam penyemak imbas anda harus melihat 4 dan 7 yang menunjukkan bahawa kami telah berjaya mengimport dan menggunakan fungsi jumlah Lodash.

Jika anda telah mengikuti sejauh ini anda tahu semua yang anda perlukan untuk memulakan menggunakan modul dalam penyemak imbas hari ini, ini membawa banyak manfaat yang kami digariskan pada permulaan.

tidak diperlukan global?

Kemerdekaan Perintah Sumber

Akses ke NPM

tidak perlu nama nama kod aplikasi anda sendiri

Kami akan melihat pemuatan modul dinamik pada masa runtime kemudian.

Webpack

Webpack adalah modul modul. Webpack mengambil modul dengan kebergantungan dan menghasilkan aset statik yang mewakili modul tersebut.

Mari tambahkan skrip baru ke Package.json untuk memanggil Webpack

export default function $() { ... } 
Jalankannya dengan NPM Run Webpack

Webpack akan menulis semula bundle.js dan output dalam penyemak imbas mestilah sama.

Cuba menjalankan NPM Run Browserify dan NPM Run Webpack dan memeriksa perbezaan dalam fail bundle.js yang disusun. Ia tidak begitu penting untuk memahami bagaimana alat-alat ini berfungsi secara dalaman, perkara penting yang perlu diperhatikan ialah sementara pelaksanaannya berbeza, mereka pada dasarnya melakukan tugas yang sama untuk menyusun kod yang sama dengan modul CommonJS ke dalam javascript mesra penyemak imbas standard. Setiap modul dimasukkan ke dalam fungsi dalam bundle.js dan diberikan id supaya ia dapat dimuat seperti yang diperlukan.

ada
jauh lebih untuk webpack daripada ini walaupun! Ia benar -benar adalah pisau tentera Swiss bundlers modul. Webpack juga dilengkapi dengan alat yang hebat untuk pembangunan keluar dari kotak, perkara -perkara seperti penggantian modul panas yang secara automatik akan memuatkan semula modul individu dalam penyemak imbas kerana ia berubah -sama dengan livereload tetapi tanpa halaman menyegarkan.
Terdapat senarai pemuat yang semakin meningkat untuk jenis aset yang berbeza juga, walaupun CSS dengan pemuat CSS dan pemuat gaya yang boleh menyusun CSS ke dalam bundle JavaScript dan menyuntiknya ke halaman pada runtime. Ini adalah di luar skop artikel ini tetapi lebih banyak boleh didapati pada ini untuk memulakan dengan Webpack.

Transpiler JavaScript

Ini adalah tiga pemindahan yang paling popular yang digunakan hari ini, anda juga mungkin mahu menggunakan yang lain dari bahasa
yang sangat panjang bahasa yang disusun kepada JS.
Sebelum melihat bagaimana kita boleh menggunakannya dengan modul modul kita, mari kita lihat cara menggunakan alat secara langsung.

import $ from 'jquery'; $(function() { ... }); 
Coffeescript

Edit coffee-lib.coffee

mkdir modules-app cd modules-app npm init -y npm install --save-dev browserify webpack jspm mkdir src touch src/{entry,lib}.js index.html 
Nota: Coffeescript menggunakan sintaks Commonjs untuk modul

tambahkan skrip ke pakej.json untuk menjalankan kopi yang boleh dilaksanakan

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Modules!</title> </head> <body> <script src="bundle.js"></script> </body> </html> 
Jalankannya dengan NPM Run Coffee

TypeScript

edit ts-lib.ts

var double = function(number) { return number * 2; } module.exports = { double: double } 
Nota: TypeScript mempunyai sintaks sendiri untuk modul yang kelihatan seperti campuran sintaks modul ES2015 dan Commonjs.

tambahkan skrip ke pakej.json untuk menjalankan TSC Executable

var App = {}; App.Models = {}; App.Models.Note = function() {}; 

Jalankannya dengan npm run tsc

pengkompil akan mengadu tentang tidak dapat mencari lodash kerana ia memerlukan definisi jenis untuk mengetahui cara bekerja dengan modul luaran yang bukan fail typescript. Anda boleh mengambil fail definisi dengan:

export default function $() { ... } 

Babel

edit es6-lib.js

import $ from 'jquery'; $(function() { ... }); 

Nota: Babel memahami sintaks modul ES2015 baru yang indah.

Babel memerlukan fail konfigurasi untuk menentukan pratetap mana yang hendak digunakan

mkdir modules-app cd modules-app npm init -y npm install --save-dev browserify webpack jspm mkdir src touch src/{entry,lib}.js index.html 

Tambahkan skrip ke Package.json untuk menjalankan Babel Cli

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Modules!</title> </head> <body> <script src="bundle.js"></script> </body> </html> 

Jalankannya dengan NPM Run Babel

Fail di /Dist kini mengandungi kod ES5 dalam format modul Commonjs yang akan berfungsi dengan sempurna dengan Browserify atau Webpack seperti yang kami gunakan sebelum ini. Anda boleh turun ke ES5 dengan Commonjs terlebih dahulu dan kemudian bundle, atau anda boleh menggunakan pakej lain untuk melakukan kedua -duanya dalam satu langkah.

untuk melayari terdapat plugin coffeify, tsify dan babelify to transpile and bundle.

untuk webpack terdapat pemuat kopi pemuat, TS-Loader dan Babel-Loader untuk memerlukan modul dalam bahasa yang berbeza.

jspm

JSPM adalah pengurus pakej untuk loader modul universal Systemjs, yang dibina di atas loader modul ES6 dinamik

JSPM mengambil pendekatan yang berbeza dan bermula dengan sistem loader modul.js. System.js adalah projek yang akan mengikuti spesifikasi loader kerana ia dibangunkan.

Pasang dan memulakan projek JSPM

var double = function(number) { return number * 2; } module.exports = { double: double } 

menerima semua lalai dan pastikan Babel digunakan sebagai transpiler, yang akan mengkonfigurasi System.js untuk menggunakan Babel apabila ia berjalan ke dalam modul gaya ES6.

kemas kini index.html untuk memuat dan mengkonfigurasi System.js

var lib = require('./lib.js'); console.log(lib.double(2)); 

Dalam penyemak imbas, anda akan melihat beberapa permintaan yang dibuat dan 404 untuk Lodash, ini kerana JSPM memuatkan pakej dari direktori JSPM_Packages secara lalai.
Jalankan JSPM Pasang Lodash untuk memasang lodash dalam direktori itu dan anda harus melihat output yang diharapkan dalam konsol, 4 dan 7, inilah yang berlaku:

fail entry.js kami dimuatkan secara dinamik dengan System.import ('src/entry.js') ;.

sistem.js memuat entry.js, melihat bahawa ia memerlukan modul lib kami sehingga mengambilnya semasa runtime.

sistem.js memuat lib.js, melihat bahawa ia memerlukan lodash/jumlah dan mengambilnya juga.

System.js juga tahu bagaimana untuk bekerja secara langsung dengan ES6, kemas kini entry.js untuk secara dinamik memerlukan modul ES6 kami dan disusun dengan cepat.

"scripts": { "browserify": "browserify ./src/entry.js -o ./bundle.js" }, 
Anda juga boleh cuba memuatkan versi Coffeescript atau Modul TypeScript yang disusun ES5 dengan tidak menafsirkan garis -garis itu satu demi satu. Pilihan lain ialah menggunakan plugin System.js untuk memindahkan kod, dan bukannya memerlukan kod ES5 yang terdahulu.

tambahkan skrip akhir ke Package.json untuk membuat bundle dengan JSPM

npm install lodash --save-dev 
Jalankannya dengan NPM Run JSPM

Akhirnya tidak mengisytiharkan tag skrip untuk bundle.js dalam index.html dan pelayar harus memuatkan bundle siap pengeluaran tanpa sebarang permintaan HTTP tambahan.

var App = {}; App.Models = {}; App.Models.Note = function() {}; 

Revisiting Webpack

Contoh webpack kami sebelum ini adalah contoh yang paling mudah menggunakan pilihan lalai, ia disusun entry.js dengan modul CommonJS ke dalam satu bundle. Apabila melakukan perkara yang lebih mewah dengan Webpack, anda akan mahu membuat fail konfigurasi tersuai untuk semua konfigurasi loader.

Buat webpack.config.js dalam akar projek

export default function $() { ... } 

kemas kini index.html untuk memuatkan hanya fail yang dibundel lagi.

import $ from 'jquery'; $(function() { ... }); 

Pasang pemuat untuk transpiling dengan babel, coffeescript dan typescript

mkdir modules-app cd modules-app npm init -y npm install --save-dev browserify webpack jspm mkdir src touch src/{entry,lib}.js index.html 

Pasang webpack secara global dan lari tanpa argumen untuk membuat bundle dari fail konfigurasi kami.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Modules!</title> </head> <body> <script src="bundle.js"></script> </body> </html> 

Sekarang bahawa Webpack tahu untuk menggunakan pemuat ini untuk sambungan fail ini kami bebas menggunakan ES6, Coffeescript atau TypeScript dari entry.js, mencubanya dengan tidak menafsirkan satu demi satu.

var double = function(number) { return number * 2; } module.exports = { double: double } 

Terdapat lebih banyak lagi webpack daripada yang saya tutupi di sini, tetapi persediaan mudah ini adalah titik permulaan yang hebat.

di sana dan kembali lagi

Dan oleh itu kami menamatkan penerokaan modul kami, mereka menyelesaikan banyak masalah dan benar -benar dapat mengurangkan kerumitan aplikasi kami -jika perkakas tidak dapat dalam perjalanan kami. Jika anda belum menggunakan modul, sekarang adalah masa. Tidak perlu menghabiskan jam paip aset yang tidak perlu, sebaliknya gunakan alat mudah yang hanya berfungsi ™.

Webpack adalah juggernaut semasa dan anda akan dapat mengkonfigurasinya untuk melakukan hampir apa -apa. JSPM adalah alat yang hebat untuk semua keperluan bundling anda dan berfungsi dengan pelbagai format dan mempunyai pengalaman pemaju yang bagus. Browserify masih merupakan pilihan yang kukuh, datuk modul modul moden -ekosistemnya telah berkembang untuk memasukkan beberapa ciri -ciri yang sangat disayangi oleh Webpack (seperti pemisahan bundle dan memuat semula panas). Akhirnya System.js sangat sesuai untuk apabila anda perlu memuatkan modul tambahan semasa runtime.

Anda tidak mahu menggunakan semua alat di atas dalam satu projek tetapi penting untuk memahami tiga pilihan popular ini, serta bagaimana anda boleh menggunakan transpiler apabila keperluan timbul. Jika anda hanya mahu menggunakan modul, maka Browserify, JSPM atau Webpack dengan pilihan lalai akan melakukan kerja.

Pastikan alat mudah dan cahaya konfigurasi. Selamat bundling.

Soalan Lazim (Soalan Lazim) Mengenai Modul JavaScript, Bundling, dan Transpiling

Apakah perbezaan antara modul JavaScript, bundling, dan transpiling? Mereka membantu dalam menganjurkan kod, menjadikannya lebih dapat dipelihara dan boleh diguna semula. Bundling, sebaliknya, adalah proses menggabungkan pelbagai fail JavaScript ke dalam satu fail. Ini dilakukan untuk mengurangkan bilangan permintaan HTTP, yang dapat meningkatkan prestasi aplikasi web dengan ketara. Transpiling adalah proses menukar kod sumber dari satu bahasa atau versi ke yang lain. Dalam konteks JavaScript, ia sering merujuk kepada menukarkan sintaks JavaScript yang lebih baru ke dalam versi yang lebih lama untuk keserasian dengan pelayar yang lebih tua. . Pertama, ia mengurangkan bilangan permintaan HTTP dengan menggabungkan pelbagai fail JavaScript ke dalam satu. Ini dapat meningkatkan prestasi aplikasi web dengan ketara. Kedua, bundling membolehkan anda menggunakan modul dalam pelayar yang tidak menyokong mereka. Akhir sekali, bundling juga boleh memasukkan proses yang dipanggil minifikasi, yang mengurangkan saiz fail JavaScript, meningkatkan prestasi. Babel, memainkan peranan penting dalam memastikan bahawa kod JavaScript serasi di seluruh pelayar yang berbeza. Ia melakukan ini dengan menukar sintaks JavaScript yang lebih baru ke dalam versi lama yang disokong oleh kebanyakan pelayar. Ini membolehkan pemaju menggunakan ciri -ciri terkini JavaScript tanpa bimbang tentang isu keserasian penyemak imbas.

Bagaimana modul JavaScript berfungsi? fungsi yang boleh digunakan oleh modul lain. Apabila modul diimport, pembolehubah atau fungsinya yang dieksport tersedia untuk skrip pengimportan. Ini membolehkan penggunaan semula kod dan organisasi yang lebih baik. Alat ini bukan sahaja membungkus fail JavaScript tetapi juga menawarkan ciri -ciri seperti pemisahan kod, pemuatan malas, dan pengendalian aset lain seperti CSS dan imej. Membolehkan pemaju menulis JavaScript moden menggunakan ciri -ciri terkini dan sintaks, tanpa bimbang tentang isu keserasian. Transpiler menukarkan JavaScript moden menjadi versi yang serasi dengan kebanyakan pelayar. Ini memastikan bahawa kod JavaScript berjalan secara konsisten merentasi pelayar yang berbeza.

Bolehkah saya menggunakan modul JavaScript tanpa bundling?

Ya, mungkin menggunakan modul JavaScript tanpa bundling. Walau bagaimanapun, ini mungkin membawa kepada isu -isu prestasi kerana banyak permintaan HTTP. Juga, tidak semua pelayar menyokong modul JavaScript, jadi bundling dapat membantu memastikan keserasian. bilangan permintaan HTTP. Minifikasi, sebaliknya, adalah proses mengeluarkan aksara yang tidak perlu (seperti ruang dan komen) dari fail JavaScript untuk mengurangkan saiznya. Kedua -dua pengundian dan minifikasi dapat meningkatkan prestasi aplikasi web. . Faktor yang perlu dipertimbangkan termasuk saiz projek anda, ciri -ciri yang anda perlukan (seperti pemisahan kod atau pengendalian aset lain), dan keutamaan peribadi anda. Adalah idea yang baik untuk mencuba beberapa alat yang berbeza dan melihat mana yang paling sesuai untuk projek anda. Modul, bundling, dan transpiling kelihatan menjanjikan. Dengan evolusi JavaScript yang berterusan, kita boleh mengharapkan ciri -ciri dan sintaks yang lebih canggih, yang memerlukan transpiling untuk keserasian dengan pelayar yang lebih tua. Bundling akan terus menjadi penting untuk alasan prestasi. Bagi modul, mereka menjadi bahagian standard JavaScript, dan kami boleh mengharapkan sokongan yang lebih baik untuk mereka dalam pelayar.

Atas ialah kandungan terperinci Memahami Modul JavaScript: Bundling & Transpiling. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Data yang tidak berubah dan javascript berfungsi dengan moriArtikel seterusnya：Data yang tidak berubah dan javascript berfungsi dengan mori

Artikel berkaitan

Lihat lagi