Cara menggunakan babel untuk menukar kod dalam Vue

Dengan pengemaskinian dan lelaran berterusan teknologi bahagian hadapan Web, kelajuan kemas kini rangka kerja semakin meningkat secara beransur-ansur Sebagai rangka kerja bahagian hadapan JavaScript yang sangat popular, Vue.js hanya boleh mengekalkan daya saingnya dalam industri ini dengan pembelajaran berterusan dan. mengemas kini. Dalam artikel ini, kita akan membincangkan cara menggunakan Babel untuk menukar kod Vue.js kepada kod yang boleh difahami oleh penyemak imbas.

Apa itu Babel?

Babel ialah pengkompil JavaScript dipacu komuniti yang menukar versi baharu kod JavaScript kepada kod ES5 untuk memastikan kod itu boleh berjalan lancar dalam penyemak imbas.

Untuk pembangun bahagian hadapan, Babel memainkan peranan yang sangat penting. Kerana ia boleh membantu kami menggunakan versi terkini ciri bahasa JavaScript tanpa perlu risau tentang isu keserasian penyemak imbas.

Menggunakan Babel dalam Vue.js

Vue.js ialah rangka kerja yang ditulis dalam JavaScript yang boleh membantu kami membina aplikasi web satu halaman responsif dengan cepat. Dalam Vue.js, peranan utama Babel ialah menukar kod ES6+ (spesifikasi bahasa JavaScript untuk ECMAScript6 dan ke atas) kepada kod ES5 untuk memastikan ia boleh berjalan dengan betul dalam pelbagai penyemak imbas.

Khususnya, untuk menggunakan Babel dalam Vue.js, kita perlu mencipta fail bernama .babelrc dalam direktori akar projek. Fail ini mengandungi maklumat konfigurasi yang mengarahkan Babel cara menukar kod.

Sekarang, mari kita perkenalkan secara ringkas cara menggunakan Babel untuk menukar kod Vue.js.

1. Pasang Babel

Mula-mula, kita perlu memasang Babel dalam projek. Buka terminal dan masukkan arahan berikut:

npm install babel-core babel-loader babel-preset-env --save-dev

Arahan di atas akan memasang modul berikut:

1. babel-core: Babel’s core module.
2. pemuat babel: Modul yang diperlukan untuk menyepadukan Babel dengan alat pembungkusan webpack.
3. babel-preset-env: Modul diperlukan untuk menukar kod ES6+ kepada sintaks ES5.

Selepas pemasangan selesai, cipta fail .babelrc dalam direktori akar projek.

2. Menulis fail .babelrc

Dalam fail .babelrc, kami perlu menentukan maklumat versi kod JavaScript yang hendak ditukar, serta pemalam dan pratetap untuk digunakan. Berikut ialah contoh fail .babelrc asas:

{
  "presets": ["env"]
}

Di sini kami hanya mengkonfigurasi atribut pratetap dengan nilai env, menunjukkan bahawa kami mahu menggunakan pratetap env Babel. Fungsi env pratetap adalah untuk melakukan penukaran pintar dan menentukan pemalam yang mana untuk digunakan untuk menukar kod mengikut persekitaran yang dikonfigurasikan.

Sebenarnya, modul babel-preset-env dipasang secara automatik apabila kami memasang Babel, jadi tidak perlu memasang modul ini secara berasingan.

3. Mengkonfigurasi Babel dalam webpack

Apabila menggunakan webpack untuk membungkus projek Vue.js, kami perlu menambahkan konfigurasi Babel pada fail konfigurasi webpack. Buka fail webpack.config.js dan konfigurasikannya seperti berikut:

module.exports = {
  module: {
    rules: [{
      test: /.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      }
    }]
  }
}

Di sini kami mentakrifkan pemuat Babel, yang akan memuatkan semua fail dengan akhiran .js dan menukarnya melalui Babel .

Pada masa yang sama, kami mendapati bahawa kami menyatakan bahawa folder node_modules tidak akan ditukar dalam atribut exclude. Ini kerana kod dalam folder ini biasanya dipasang melalui npm dan tidak perlu ditukar.

Kesimpulan

Dalam Vue.js, menggunakan Babel untuk penukaran kod membolehkan aplikasi anda berjalan pada lebih banyak penyemak imbas, sambil turut menikmati faedah yang dibawa oleh versi baharu JavaScript. Dengan pengenalan ringkas di atas, anda telah mengambil langkah pertama ke arah pengoptimuman aplikasi.

Atas ialah kandungan terperinci Cara menggunakan babel untuk menukar kod dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!