Bagaimana untuk membina persekitaran berjalan es6

Langkah membina: 1. Pasang alat babel-cli, sintaks "npm install --save-dev babel-cli" 2. Pasang dependencies, sintaks "npm install --save-dev babel-preset-es2015; babel-cli"; 3. Konfigurasikan fail ".babelrc" dalam direktori akar dan tetapkan peraturan transcoding; 4. Ubah suai item pelaksanaan perintah skrip dalam package.json.

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

Kelebihan es6 (luar topik):

es6 ialah ECMAScript2015. es6 ialah subset js, tetapi js yang biasa kita bincangkan ialah versi sebelum es6. js sendiri adalah bahasa yang sangat tidak sempurna, tetapi es6 menyembunyikan banyak bahagian hodoh js melalui gula sintaks. Ia menyediakan banyak ciri, seperti pemprosesan data javascript, fungsi anak panah, tugasan memusnahkan, Parameter Lalai (parameter lalai), Kelas (kelas), Modul (modul), dll., termasuk kaedah permintaan tak segerak ini untuk bahagian hadapan dan belakang. pemisahan, yang boleh menjadi sangat baik Selesaikan masalah yang dihadapi oleh bahagian hadapan yang besar.

Membina persekitaran pembangunan untuk es6 (menukar es6 kepada es5)

Jika anda ingin melakukan kerja anda dengan baik, anda mesti mengasah alat anda dahulu, haha, jadi langkah pertama ialah membina satu persekitaran pembangunan es6. Penyemak imbas versi rendah tidak menyokong sintaks es6, yang memerlukan penukaran sintaks es6 kepada sintaks es5 dalam persekitaran yang dijalankan Webpack mempunyai keupayaan kompilasi dan penukaran automatik dalam Vue Selain Webpack, babel boleh digunakan

Peraturan penggunaan Babel

Babel ialah transkoder yang digunakan secara meluas yang boleh menukar kod ES6 kepada kod ES5 untuk dilaksanakan dalam persekitaran sedia ada.

Ini bermakna anda boleh menulis program dalam ES6 sekarang tanpa perlu risau sama ada persekitaran sedia ada anda menyokongnya. Di bawah adalah contoh.

// 转码前
input.map(item => item + 1);

// 转码后
input.map(function (item) {
  return item + 1;
});
//上面的原始代码用了箭头函数，这个特性还没有得到广泛支持，Babel将其转为普通函数，就能在现有的JavaScript环境执行了。

1. Pasang babel

Babel menyediakan babel-cli alatan untuk transcoding baris arahan.

Arahan pemasangannya adalah seperti berikut:

//需要先安装babel-cli
npm install --global babel-cli

2. Fail konfigurasi .babelrc

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

Fail ini digunakan untuk menetapkan peraturan transkod dan pemalam Format asas adalah seperti berikut. Medan

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

presets menetapkan peraturan transcoding Peraturan rasmi di bawah disediakan. Anda boleh memasangnya mengikut keperluan.

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

# 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

Kemudian, tambahkan peraturan ini .babelrc.

//例如：按需求添加
{
    "presets": [
      	"es2015",
      	"stage-2"
    ],
	"plugins": []
}

3. Penggunaan

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

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

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

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

---

Kod di atas ditranskodkan oleh Babel dalam persekitaran global. Ini bermakna jika projek itu dijalankan, persekitaran global mesti mempunyai Babel, yang bermaksud bahawa projek itu mempunyai kebergantungan kepada alam sekitar. Sebaliknya, ini juga gagal menyokong projek yang berbeza menggunakan versi Babel yang berbeza.

Penyelesaian ialah memasang babel-cli dalam projek.

# 安装
npm install --save-dev babel-cli

Kemudian, tulis semula package.json.

{
  // ...
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
  "scripts": {
    "build": "babel src -d lib"
  },
}

Apabila transcoding, laksanakan arahan berikut.

npm run build

Tonton sepuluh ribu kali, mengapa tidak mengamalkannya sendiri

Langkah pertama: (Buat projek dan direktori tempatan)

Langkah 2 : (Mulakan projek, tambah pakej kebergantungan transkod)

Buka vscode terminal ctrl ~, mulakan projek dalam direktori akar fail:

akan menjana fail pakej .json, tujuan -y adalah untuk mengkonfigurasi nilai lalai semasa pemulaan, dan kemudian mengubah suainya dalam fail yang dijana.

npm init -y

npm terlalu perlahan, mula-mula pasang cnpm

Pasang alat

secara global dalam terminal untuk transcoding baris arahan

npm install -g cnpm --registry=https://registry.npm.taobao.org

Saya tidak sabar untuk mencubanya untuk melihat sama ada ia berfungsi dan sama ada ia boleh ditranskod, jadi saya mengujinya di terminal dahulubabel-cli

cnpm install -g babel-cli

Seperti yang saya jangkakan, ia pasti menang tidak bekerja! Fail index.js dijana di bawah fail dist, tetapi ia tidak ditukar kepada sintaks es5

babel src/index.js -o dist/index.js

Kemudian pasang dua pakej pergantungan secara setempat

Jika kandungan berikut muncul dalam package.json, tahniah, semua pakej bergantung telah dipasang

cnpm install --save-dev babel-preset-es2015 babel-cli

Langkah 3: (.babelrc file configuration dalam direktori akar)

第四步：（package.json中修改scripts命令执行项）

第五步：（验收成果，哈哈！）

cnpm run build

你也可以在src/index.js中再写些es6的语法，测试下。

【相关推荐：javascript视频教程、编程视频】

Atas ialah kandungan terperinci Bagaimana untuk membina persekitaran berjalan es6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!