Bolehkah babel menukar es6 kepada es5

Ya, kaedah penukaran: 1. Jalankan perintah "npm install -g babel-cli --save-dev" dalam direktori akar projek untuk memasang Babel ke dalam projek dan simpan fail konfigurasi Babel ". babelrc" Dalam direktori akar projek, tetapkan peraturan transcoding; 2. Pasang gulp dan gulp-babel dalam projek, dan konfigurasikan fail "gulpfile.js".

Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript 6&&babel versi 6, komputer Dell G3.

Walaupun kami masih taksub dengan ES5, kami tidak tahu bahawa ES6 telah dikeluarkan selama beberapa tahun. Masa semakin maju, dan teknologi bahagian hadapan WEB juga berubah setiap hari Sudah tiba masanya untuk membuat beberapa perubahan!

ECMAScript 6 (ES6) membangun dengan sangat pantas, tetapi penyemak imbas moden tidak mempunyai sokongan tinggi untuk ciri baharu ES6, jadi jika anda ingin menggunakan ciri baharu ES6 secara langsung dalam penyemak imbas, anda perlu gunakan alat lain untuk mencapainya.
Babel ialah transkoder yang digunakan secara meluas Babel boleh menukar kod ES6 kepada kod ES5 dengan sempurna, jadi kami boleh menggunakan ciri ES6 dalam projek kami tanpa menunggu sokongan penyemak imbas.

Perbezaan antara babel 6 dan versi sebelumnya:

Versi sebelumnya hanya perlu memasang babel, jadi versi sebelumnya mengandungi banyak perkara, ini Ia juga mengakibatkan memuat turun sekumpulan barangan yang tidak diperlukan. Tetapi dalam babel 6, babel dibahagikan kepada dua pakej: babel-cli dan babel-core. Jika anda ingin menggunakan babel dalam CLI (terminal atau REPL) muat turun babel-cli, jika anda ingin menggunakannya dalam nod muat turun babel-core. Babel 6 telah dibuat sebagai modular yang mungkin Jika anda masih menggunakan kaedah sebelum Babel 6 untuk menukar ES6, ia akan dikeluarkan seperti sedia ada dan tidak akan ditukar kerana anda perlu memasang pemalam. Jika anda ingin menggunakan fungsi anak panah, anda perlu memasang fungsi anak panah plug-in npm install babel-plugin-transform-es2015-arrow-functions.

Dalam artikel ini, kami tidak akan membincangkan ciri sintaks ES6, tetapi memberi tumpuan kepada cara menukar kod ES6 kepada kod ES5.

Transkod Babel:

Jika anda belum terdedah kepada ES6, apabila anda melihat kod berikut, anda mestilah It's agak mengelirukan (apa kejadahnya ini? Sepuluh ribu binatang mitos sedang meluru di fikiran saya), tetapi anda membacanya dengan betul, ini adalah ES6. Sama ada anda melihatnya atau tidak, ia ada di sini.

var a = (msg) => () => msg;
 
var bobo = {
  _name: "BoBo",
  _friends: [],
  printFriends() {
    this._friends.forEach(f =>
      console.log(this._name + " knows " + f));
  }
};

Malah, selepas kod di atas ditukar oleh Babel, ia akan menjadi:

"use strict";
 
var a = function a(msg) {
  return function () {
    return msg;
  };
};
 
var bobo = {
  _name: "BoBo",
  _friends: [],
  printFriends: function printFriends() {
    var _this = this;
 
    this._friends.forEach(function (f) {
      return console.log(_this._name + " knows " + f);
    });
  }
};

Baiklah, mari kita kembali kepada subjek, mari kita cuba beberapa kaedah untuk mencapai penukaran di atas.

1. Pasang Babel terus:

1.1) Mula-mula pasang Babel secara global.

$ npm install -g babel-cli
 
//也可以通过直接将Babel安装到项目中，在项目根目录下执行下面命令，同时它会自动在package.json文件中的devDependencies中加入babel-cli
//在执行安装到项目中命令之前，要先在项目根目录下新建一个package.json文件。
$ npm install -g babel-cli --save-dev

Jika anda memasang babel terus ke dalam projek anda, ia akan menambahkan babel-cli secara automatik pada devDependencies dalam fail package.json. Seperti yang ditunjukkan di bawah:

	//......
	{
	  "devDependencies": {
	    "babel-cli": "^6.22.2"
	  }
	}

1.2) Fail konfigurasi Babel ialah .babelrc, yang disimpan dalam direktori akar projek. Langkah pertama dalam menggunakan Babel adalah untuk mengkonfigurasi fail ini.

Nama fail lengkap fail ini ialah ".babelrc". Memandangkan komputer saya ialah sistem Windows, apabila saya mencipta fail ini, saya sentiasa mendapat ralat "Anda mesti menaip nama fail." Kemudian, saya google dan mendapati bahawa semasa membuat fail ini, saya menukar nama fail kepada ".babelrc." Perhatikan bahawa terdapat titik sebelum dan selepas, supaya ia boleh disimpan dengan jayanya

	{
	  "presets": [],
	  "plugins": []
	}

1.3 ) Medan pratetap menetapkan peraturan transcoding Set peraturan berikut disediakan secara rasmi. Anda boleh memasangnya mengikut keperluan.

Klik di sini untuk pergi ke halaman konfigurasi pratetap laman web rasmi Cina Babel:

Pemalam Babel

	# ES2015转码规则
	$ npm install --save-dev babel-preset-es2015

	# react转码规则
	$ npm install --save-dev babel-preset-react

	# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
	$ npm install --save-dev babel-preset-stage-0
	$ npm install --save-dev babel-preset-stage-1
	$ npm install --save-dev babel-preset-stage-2
	$ npm install --save-dev babel-preset-stage-3

1.4) Mengikut gesaan tapak web rasmi, apabila kami menggunakan npm untuk memasang alat pemalam ini Selepas itu, kita perlu menambah peraturan ini pada .babelrc. Seperti yang ditunjukkan di bawah:

	{
	    "presets": [
	      "es2015",
	      "react",
	      "stage-2"
	    ],
	    "plugins": []
	  }

1.5) Peraturan transkod dan transkod:

	# 转码结果输出到标准输出
	$ babel test.js

	# 转码结果写入一个文件
	# --out-file 或 -o 参数指定输出文件
	$ babel a.js --out-file b.js
	# 或者
	$ babel a.js -o b.js

	# 整个目录转码
	# --out-dir 或 -d 参数指定输出目录
	$ babel src --out-dir lib
	# 或者
	$ babel src -d lib

	# -s 参数生成source map文件
	$ babel src -d lib -s

2 kaedah konfigurasi alat:

Sebenarnya, kami boleh melaksanakan konfigurasi transcoding ES6 melalui banyak alat automasi bahagian hadapan, seperti dengusan biasa, teguk, Webpack dan Node. Di bawah ini saya akan bercakap secara ringkas tentang kaedah konfigurasi gulp yang saya lebih kenali.

Klik di sini untuk pergi ke laman web rasmi Cina Babel halaman konfigurasi Alat: Alat Babel

2.1) Pertama, kita perlu memasang gulp dalam projek:

	$ npm install gulp --save-dev

2.2) Kemudian, Kami perlu memasang gulp-babel dalam projek:

	$ npm install --save-dev gulp-babel

Selepas melaksanakan dua arahan di atas, kami akan mendapati bahawa kandungan fail package.json dalam direktori root telah secara automatik diubahsuai kepada:

	{
	  "devDependencies": {
	    "babel-cli": "^6.22.2",
	    "gulp": "^3.9.1",
	    "gulp-babel": "^6.1.2"
	  }
	}

2.3) Tulis fail gulpfile.js Kandungan fail adalah seperti berikut:

	var gulp = require("gulp");
	var babel = require("gulp-babel");

	gulp.task("default", function () {
	  return gulp.src("src/a.js")
	    .pipe(babel())
	    .pipe(gulp.dest("lib"));
	});

Apabila kami menjalankan arahan berikut dalam direktori projek semasa, kami. akan mendapati bahawa ia pada asalnya dalam folder src Fail a.js (ditulis mengikut piawaian ES6) telah ditranskodkan ke dalam standard ES5 a.js dan diletakkan dalam folder lib.

	$ gulp default

	#或者用下面的命令也行
	$ gulp

[Cadangan berkaitan:

tutorial video javascript, Video pengaturcaraan]

Atas ialah kandungan terperinci Bolehkah babel menukar es6 kepada es5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!