ES6第一节：开发环境的搭建
前言：由于目前瀏覽器對ES6的支持度不高，需要借助babel將編寫好的ES6代碼轉(zhuǎn)換成ES5，瀏覽器才能解析。
? ? ? ? ? ?需要在NodeJS環(huán)境下運行
一. 建立結(jié)構(gòu)：兩個文件夾和一個html文件，分別是src和dist還有index.html，還要在src目錄下新建一個index.js文件，并在index.html里將其引用進去
? ? ?如： dist
? ? ? ? ? ? ?src
? ? ? ? ? ? ? ? ? ?- index.js
? ? ? ? ? ? index.html
? ? 下面是index.html中的代碼： (注意index中引用的js是dist目錄下的，因為dist是編譯后的js，src里的js是我們編寫的es6代碼)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./dist/index.js"></script> 9 </head> 10 <body> 11 hello es6 12 </body> 13 </html>二.初始化項目：
? ? ?用 cnpm init -y
? ? ?說明：cnpm是淘寶的鏡像源，因為npm安裝往往很慢，沒有安裝的朋友可以直接將下面的地址復(fù)制到命令行按回車即可安裝，就能使用cnpm了，-y代表全部默認同意，就不用一次次按回車了：npm install?-g cnpm?--registry=https://registry.npm.taobao.org
三.安裝Babel相關(guān)：
? ? 1.全局安裝?babel-cli? ?
? ? ? ?cnpm install babel-cli -g
? ? 2.本地安裝babel-preset-es2015 和 babel-cli
? ? ? ?cnpm install babel-preset-es2015 babel-cli --save-dev
四.根目錄下新建：.babelrc 文件，并打開編輯：
1 { 2 "presets":[ 3 "es2015" 4 ], 5 "plugins":[] 6 }?上面4大步配置好后，此時我們到src目錄下的index.js文件中嘗試編寫ES6語法的js代碼:
1 let msg = "hello es6"; 2 console.log(msg);編寫完后我們最后一步就是編譯了，接下來就是見證奇跡的時候了，打開終端，定位到當(dāng)前目錄，這里推薦使用Visual Studio Code編輯器，會自動定位到當(dāng)前目錄：
1 babel src/index.js -o dist/index.js這時到dist目錄下去看，你會發(fā)現(xiàn)多了一個index.js的文件，并且里面的代碼就是剛剛src目錄下的index.js文件編譯后的es5代碼：
1 "use strict"; 2 3 var msg = "hello es6"; 4 console.log(msg);至此，ES6的運行環(huán)境搭建完成并且運行成功！
總結(jié)：1建立目錄結(jié)構(gòu)
? ? ? ? ? ?2初始化當(dāng)前項目
? ? ? ? ? ?3安裝babel編譯工具
? ? ? ? ? ?4編譯打包：babel src/index.js -o dist/index.js
小技巧：簡化編譯打包命令：打開根目錄的package.json文件，將"srcipt"下添加一段代碼：
? ? ? ? ? ? ? 以后編譯打包直接用： npm run build? 就可以了，不用?babel src/index.js -o dist/index.js? 一長串這么麻煩
1 "scripts": { 2 "build": "babel src/index.js -o dist/index.js" 3 }轉(zhuǎn)載于:https://www.cnblogs.com/herxondon/p/10301446.html
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的ES6第一节：开发环境的搭建的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Entity Framework在WCF
- 下一篇： 创建文件夹c++