Apakah maksud babel in vue?

In vue, Babel ialah pengkompil JavaScript, terutamanya digunakan untuk menukar kod yang ditulis dalam sintaks ECMAScript 2015 kepada sintaks JavaScript serasi ke belakang supaya ia boleh dijalankan pada versi semasa dan lama pelayar atau persekitaran lain.

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Sintaks ES6 biasanya digunakan dalam projek vue, tetapi kadangkala projek kami perlu serasi dengan penyemak imbas versi lebih rendah Dalam kes ini, kami perlu memperkenalkan pemalam babel untuk menukar es6 kepada es5. Mari kita lihat apa itu babel.

Babel ialah penyusun JavaScript

Babel ialah rantai alat yang digunakan terutamanya untuk menukar kod yang ditulis dalam sintaks ECMAScript 2015 kepada sintaks JavaScript yang serasi ke belakang untuk dapat dijalankan dalam versi semasa dan lebih lama pelayar atau persekitaran lain. Disenaraikan di bawah ialah perkara yang boleh dilakukan oleh Babel untuk anda:

• Penukaran sintaks

• Tambahkan ciri yang tiada dalam persekitaran sasaran melalui Polyfill (Dengan memperkenalkan ketiga- modul polyfill parti, seperti core-js)

• Penukaran kod sumber (codemods)

// Babel 输入： ES2015 箭头函数
[1, 2, 3].map(n => n + 1);

// Babel 输出： ES5 语法实现的同等功能
[1, 2, 3].map(function(n) {
  return n + 1;
});

Langkah untuk memperkenalkan babel ke dalam vue

1 Pasang pemalam babel-polyfill

npm install --save-dev babel-polyfill

2 selepas pemasangan berjaya Kaedah pengenalan

Cara pertama: perkenalkan dalam fail entri, contohnya: tambah

import 'babel-polyfill'

ke utama. js Cara kedua: Dalam fail webpack.config.js, ubah suai entri seperti berikut:

Kaedah ketiga: gunakan sumber cdn dan tambah fail js ke halaman html : contohnya :

Penjelasan:

Walaupun pemalam babel boleh membantu kami menukar tatabahasa es6 kepada es5, ia tidak boleh Menukar API baharu, seperti Iterator, Generator, Set, Map, Proxy, Reflect, Symbol, Promise dan objek global lain tidak akan ditukar Jika anda mahu kaedah ini dijalankan, anda mesti menggunakan babel-polyfill untuk memberikan shim persekitaran semasa.

Arahan pemasangan adalah seperti berikut.

　

Kemudian, tambah baris kod berikut di kepala skrip.

　

[Cadangan berkaitan: "tutorial vue.js"]

Atas ialah kandungan terperinci Apakah maksud babel in vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!