搭建一個es6的開發環境

時間 2019-12-04

原文原文鏈接

1.前提是你已經安裝了node,npm
2.手動建立一個工做目錄 dist,src,index.html
如下是index.html的內容javascript

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
         <script type="text/javascript" src="./dist/index.js"></script>
    </head>
    <body>
        
    </body>
    </html>

3.在src 目錄下建立一個index.js,這裏寫咱們的es6代碼html

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.接下來咱們須要把es6語法編譯成咱們瀏覽器所識別的語法es5文件，那就用到咱們的神奇 babel,在安裝babel以前咱們要先初始化一下項目 npm init -yjava

5全局安裝babel-cli
輸入如下命令：cnpm install -g babel-clinode

此時package文件中就有babel的依賴了es6

你覺得安裝babel-cli就完事了嗎，你能夠運行babel src/index.js -o dist/index.js
你會發現，確實在dist下面生成了一個index.js文件，可是仍是es6語法啊npm

來，咱們再安裝一個轉換包
cnpm install --save-dev babel-preset-es2015 babel-cli 安裝完成以後咱們的json文件就有依賴了，
touch .babelrc執行這個命令來建立一個文件，這個文件裏面書寫以下代碼json

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

好了，此時再去執行剛剛那個命令 babel src/index.js -o dist/index.js
你會發現咱們的es6代碼已經轉化成es5代碼了
瀏覽器

咱們每次執行那麼長的命令是否是有點太麻煩啊，咱們如今來修改一下pakage.json文件babel

{
  "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"
  }
}

如今咱們運行 npm run build 就能夠啦ui