ES6中如何配置運行環境

時間 2020-11-30

標籤 html node npm json 瀏覽器 babel 編輯器工具學習 spa 欄目 JavaScript 简体版

原文原文鏈接

本節咱們來學習配置 ES6 的 JavaScript 運行開發環境，經過 babel 把 ES6 轉碼爲 ES5 。html

選擇一個編輯器

首先咱們選擇一個編輯器，而後在這個編輯器下配置 ES6 的 JavaScript 運行環境。這裏咱們選擇 Visual Studio Code，固然也能夠選擇其餘的編輯器，例如 WebStorm，你們能夠根據本身的喜愛選擇。node

若是咱們要使用 Visual Studio Code，能夠到官網下載，地址爲：https://code.visualstudio.com/。你們根據需求下載 VSCode 相應版本的安裝包，而後進行安裝。npm

安裝好後的 VSCode 界面以下所示：
json

下載並安裝Node.js

接着咱們須要下載並安裝 Node.js，官網下載地址爲：https://nodejs.org/en/，下載並安裝好後，能夠經過 node -v 來查看 Node.js 的安裝版本，若是出現版本號則表示安裝成功，例如：

Node.js 中含有 npm 軟件包管理工具，因此咱們安裝好 Node.js 的同時就安裝好了 npm。瀏覽器

建立項目

而後咱們能夠建立一個項目，執行 npm init 初始化命令，根據顯示的問題輸入配置信息，若是所有默認選擇默認值，能夠直接執行 npm init -y 命令，這樣就不用再一次次按回車了。執行完命令以後，項目根目錄下會生產一個 package.json 文件，能夠根據本身的須要進行修改這個文件的配置。babel

爲了方便管理，咱們一般會在項目中建立兩個文件夾，一個文件夾爲 src 存放源碼文件，還有一個 dist 文件夾放置編譯後或者壓縮後的代碼。編輯器

安裝babel

babel 是一個普遍使用的 ES6 轉碼器，能夠將 ES6 代碼轉爲 ES5 代碼，從而在老版本的瀏覽器執行。這意味着，咱們能夠用 ES6 的方式編寫程序，又不用擔憂現有環境是否支持。工具

下面是在項目根目錄下安裝 babel 的命令：學習

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

安裝完成後，項目中會新增一個 package-lock.json 文件和 node_modules 文件夾。spa

配置文件.babelrc

babel 的配置文件是 .babelrc，存放在項目的根目錄下。使用 babel 的第一步，就是配置這個文件。

在根目錄建立這個文件，而後寫入以下代碼：

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

而後咱們就能夠開始將 ES6 轉換爲 ES5 ，例如在 src 文件夾下建立一個 index.js 文件，輸入一些內容：

let a = 100; 
console.log(a);

而後執行 babel src/index.js -o dist/bundle.js 命令，將 ES6 語法轉換爲 ES5 語法。

此時會在在 dist 目錄下生成一個 bundle.js 文件，文件內容以下所示：

"use strict";

var a = 100;
console.log(a);

咱們也能夠直接在 VSCode 中執行 index.js 文件中的內容，點擊 Run Code，終端中會輸出代碼的執行結果，上述代碼最終會輸出「100」。

在HTML文件中引入JS代碼

若是咱們要在 HTML 文件中引入 JS 代碼，能夠在項目根目錄下建立一個 index.html 文件，而後編寫文件內容。要快速建立一個 HTML 模板，能夠先輸入一個 !，而後按 tab 鍵，建立好的內容以下所示：

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

咱們在 <body> 表現中經過 <script> 引入 JS 文件，注意引入的是 dist 目錄下的文件，也就是 bundle.js。這個文件中就是 ES6 轉換後的 ES5 代碼。