資訊專(zhuān)欄INFORMATION COLUMN
摘要：前提是你已經(jīng)安裝了手動(dòng)創(chuàng)建一個(gè)工作目錄以下是的內(nèi)容在目錄下創(chuàng)建一個(gè)這里寫(xiě)我們的代碼接下來(lái)我們需要把語(yǔ)法編譯成我們?yōu)g覽器所識(shí)別的語(yǔ)法文件，那就用到我們的神奇在安裝之前我們要先初始化一下項(xiàng)目全局安裝輸入以下命令此時(shí)文件中就有的依賴(lài)了你以
1.前提是你已經(jīng)安裝了node,npm
2.手動(dòng)創(chuàng)建一個(gè)工作目錄 dist,src,index.html
以下是index.html的內(nèi)容
3.在src 目錄下創(chuàng)建一個(gè)index.js,這里寫(xiě)我們的es6代碼
class Car{
constructor(maker,price){
this.maker=maker;
this.price=price;
}
getInfo(){
console.log(this.maker+"costs"+this.price);
}
}
var car1=new Car("me",100);
car1.getInfo();
var car2=new Car("he",100000);
car2.getInfo();
4.接下來(lái)我們需要把es6語(yǔ)法編譯成我們?yōu)g覽器所識(shí)別的語(yǔ)法es5文件，那就用到我們的神奇 babel,在安裝babel之前我們要先初始化一下項(xiàng)目 npm init -y
5全局安裝babel-cli
輸入以下命令 ：cnpm install -g babel-cli
此時(shí)package文件中就有babel的依賴(lài)了
你以為安裝babel-cli就完事了嗎，你可以運(yùn)行babel src/index.js -o dist/index.js
你會(huì)發(fā)現(xiàn)，確實(shí)在dist下面生成了一個(gè)index.js文件，但是還是es6語(yǔ)法啊
來(lái)，我們?cè)侔惭b一個(gè)轉(zhuǎn)換包
cnpm install --save-dev babel-preset-es2015 babel-cli 安裝完成之后我們的json文件就有依賴(lài)了，
touch .babelrc執(zhí)行這個(gè)命令 來(lái)創(chuàng)建一個(gè)文件，這個(gè)文件里面書(shū)寫(xiě)如下代碼
{
"presets":[
"es2015"
],
"plugins":[]
}
好了，此時(shí)再去執(zhí)行剛剛那個(gè)命令 babel src/index.js -o dist/index.js
你會(huì)發(fā)現(xiàn)我們的es6代碼已經(jīng)轉(zhuǎn)化成es5代碼了
我們每次執(zhí)行那么長(zhǎng)的命令是不是有點(diǎn)太麻煩啊，我們現(xiàn)在來(lái)修改一下pakage.json文件
{
"name": "es6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "babel src/index.js -o dist/index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1"
}
}
現(xiàn)在我們運(yùn)行 npm run build 就可以啦
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92510.html
摘要：前言最近打算把應(yīng)用到項(xiàng)目中，但是如何在開(kāi)發(fā)環(huán)境瀏覽器端直接運(yùn)行已經(jīng)發(fā)布一段時(shí)間了，現(xiàn)在大部分是在環(huán)境運(yùn)行，或者通過(guò)編譯之后運(yùn)行。主要實(shí)現(xiàn)用戶(hù)能夠在瀏覽器上直接運(yùn)行語(yǔ)法。 前言 最近打算把es6應(yīng)用到項(xiàng)目中，但是如何在開(kāi)發(fā)環(huán)境（瀏覽器端）直接運(yùn)行es6？es6已經(jīng)發(fā)布一段時(shí)間了，現(xiàn)在大部分是在node.js環(huán)境運(yùn)行，或者通過(guò)babel編譯之后運(yùn)行。babel-browser主要實(shí)現(xiàn)用戶(hù)能...
摘要：本質(zhì)就是一個(gè)編譯器，通過(guò)將源代碼解析成抽象語(yǔ)法樹(shù)將源代碼的結(jié)果一系列轉(zhuǎn)換生成目標(biāo)代碼的將目標(biāo)代碼的轉(zhuǎn)換成代碼。項(xiàng)目構(gòu)建三開(kāi)發(fā)環(huán)境本地服務(wù)器搭建源碼下載地址參考資料入門(mén)阮一峰中文文檔中文網(wǎng) 注：以下教程均在 windows 環(huán)境實(shí)現(xiàn)，使用其他操作系統(tǒng)的同學(xué)實(shí)踐過(guò)程可能會(huì)有些出入。 ??在上一章 webpack 項(xiàng)目構(gòu)建：（一）基本架構(gòu)搭建 我們搭建了一個(gè)最基本的 webpack 項(xiàng)目，現(xiàn)...
摘要：全局安裝本地安裝轉(zhuǎn)碼規(guī)則安裝完成后，我們可以看一下我們的文件，已經(jīng)多了選項(xiàng)。直接在線編譯提供一個(gè)在線編譯器，可以在線將代碼轉(zhuǎn)為代碼。 古語(yǔ)有云：君子生非異也，善假于物；工欲善其事，必先利其器。 由于有些低版本的瀏覽器還是不支持ES6語(yǔ)法，學(xué)習(xí)ES6，首先要學(xué)會(huì)搭建一個(gè)基本的ES6開(kāi)發(fā)環(huán)境，利用工具，把ES6的語(yǔ)法轉(zhuǎn)變成ES5的語(yǔ)法。 1、使用Babel把ES6編譯成ES5 1...
摘要：安裝此過(guò)程沒(méi)有難點(diǎn)，略過(guò)下載完成后可以通過(guò)和來(lái)查看是否安裝成功以及版本后安裝新建一個(gè)目錄項(xiàng)目名稱(chēng)進(jìn)入該項(xiàng)目，然后一路回車(chē)即可。 node.js安裝 此過(guò)程沒(méi)有難點(diǎn)，略過(guò) 下載完成后可以通過(guò)node -v和npm -v來(lái)查看是否安裝成功以及版本后 webpack 安裝 新建一個(gè)目錄(項(xiàng)目名稱(chēng)), 進(jìn)入該項(xiàng)目，npm init, 然后一路回車(chē)即可。(會(huì)生成一個(gè)package.json...
摘要：更新日志更新完成靜態(tài)頁(yè)面原型修復(fù)使用的正確姿勢(shì)更新添加靜態(tài)頁(yè)面更新添加使用方法請(qǐng)戳我主要作用就是在你開(kāi)發(fā)環(huán)節(jié)在后端同學(xué)還未開(kāi)發(fā)完成的情況下，提供一個(gè)。 底下評(píng)論說(shuō)是標(biāo)題黨，或者是光扔個(gè)github地址上來(lái)的同學(xué)我就不說(shuō)什么了。你們有看看倉(cāng)庫(kù)的提交記錄么？我還沒(méi)有吃撐到開(kāi)個(gè)倉(cāng)庫(kù)去騙star.我的出發(fā)點(diǎn)就是每天更新一部分代碼，教大家用我所提到的技術(shù)棧搭建一個(gè)blog，我的出發(fā)點(diǎn)就是這么簡(jiǎn)單...
閱讀 2035·2021-11-25 09:43
閱讀 1967·2019-08-30 13:56
閱讀 1231·2019-08-30 12:58
閱讀 3432·2019-08-29 13:52
閱讀 763·2019-08-26 12:17
閱讀 1469·2019-08-26 11:32
閱讀 944·2019-08-23 13:50
閱讀 1309·2019-08-23 11:53
