搭建一個es6的開發環境

jcc 發布于2019-08-22 13:50 / 384人閱讀

摘要：前提是你已經安裝了手動創建一個工作目錄以下是的內容在目錄下創建一個這里寫我們的代碼接下來我們需要把語法編譯成我們瀏覽器所識別的語法文件，那就用到我們的神奇在安裝之前我們要先初始化一下項目全局安裝輸入以下命令此時文件中就有的依賴了你以

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

3.在src 目錄下創建一個index.js,這里寫我們的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.接下來我們需要把es6語法編譯成我們瀏覽器所識別的語法es5文件，那就用到我們的神奇 babel,在安裝babel之前我們要先初始化一下項目 npm init -y

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

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

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

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

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

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

我們每次執行那么長的命令是不是有點太麻煩啊，我們現在來修改一下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"
  }
}

現在我們運行 npm run build 就可以啦

云服務器 GPU云服務器 java開發環境的搭建 php開發環境的搭建 java 開發環境的搭建開發環境搭建

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92510.html

搭建es6開發與非開發環境babel-browser

摘要：前言最近打算把應用到項目中，但是如何在開發環境瀏覽器端直接運行已經發布一段時間了，現在大部分是在環境運行，或者通過編譯之后運行。主要實現用戶能夠在瀏覽器上直接運行語法。前言最近打算把es6應用到項目中，但是如何在開發環境（瀏覽器端）直接運行es6？es6已經發布一段時間了，現在大部分是在node.js環境運行，或者通過babel編譯之后運行。babel-browser主要實現用戶能...

selfimpr 2019-08-20 17:38 評論0 收藏0
webpack 項目構建：（二）ES6 編譯環境搭建

摘要：本質就是一個編譯器，通過將源代碼解析成抽象語法樹將源代碼的結果一系列轉換生成目標代碼的將目標代碼的轉換成代碼。項目構建三開發環境本地服務器搭建源碼下載地址參考資料入門阮一峰中文文檔中文網注：以下教程均在 windows 環境實現，使用其他操作系統的同學實踐過程可能會有些出入。 ??在上一章 webpack 項目構建：（一）基本架構搭建我們搭建了一個最基本的 webpack 項目，現...

marser 2019-08-22 15:08 評論0 收藏0
ES6-開發環境搭建（1）

摘要：全局安裝本地安裝轉碼規則安裝完成后，我們可以看一下我們的文件，已經多了選項。直接在線編譯提供一個在線編譯器，可以在線將代碼轉為代碼。古語有云：君子生非異也，善假于物；工欲善其事，必先利其器。由于有些低版本的瀏覽器還是不支持ES6語法，學習ES6，首先要學會搭建一個基本的ES6開發環境，利用工具，把ES6的語法轉變成ES5的語法。 1、使用Babel把ES6編譯成ES5 1...

android_c 2019-08-23 15:21 評論0 收藏0
如何搭建es6開發環境

摘要：安裝此過程沒有難點，略過下載完成后可以通過和來查看是否安裝成功以及版本后安裝新建一個目錄項目名稱進入該項目，然后一路回車即可。 node.js安裝此過程沒有難點，略過下載完成后可以通過node -v和npm -v來查看是否安裝成功以及版本后 webpack 安裝新建一個目錄(項目名稱), 進入該項目，npm init, 然后一路回車即可。(會生成一個package.json...

OldPanda 2019-08-23 14:26 評論0 收藏0
手把手教你用es6+vue2+webpack2+vue-router2搭建個人blog

摘要：更新日志更新完成靜態頁面原型修復使用的正確姿勢更新添加靜態頁面更新添加使用方法請戳我主要作用就是在你開發環節在后端同學還未開發完成的情況下，提供一個。底下評論說是標題黨，或者是光扔個github地址上來的同學我就不說什么了。你們有看看倉庫的提交記錄么？我還沒有吃撐到開個倉庫去騙star.我的出發點就是每天更新一部分代碼，教大家用我所提到的技術棧搭建一個blog，我的出發點就是這么簡單...

weapon 2019-08-20 14:15 評論0 收藏0