亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

請問關于webpack babel 怎么將Object.assign() 轉成es5語法 ?

請問關于webpack babel 怎么將Object.assign() 轉成es5語法 ?

繁華開滿天機 2019-08-16 15:10:52
webpack babel 怎么將Object.assign() 轉成es5語法 
查看完整描述

4 回答

?
料青山看我應如是

TA貢獻1772條經驗 獲得超8個贊

習慣了WebStorm的話..我就假設題主會用Node.js和npm啦~

一句話總結:用WebStorm自帶的File Watcher功能+Babel實現自動轉換ECMAScript 6代碼為ES5代碼

我是這么配置的..就先新建一個Empty Project,然后在src目錄下新建了一個main.js;
// 這一步不是必須的 只是剛上手的話 從空項目開始自己配置會少很多干擾

Then..進入設置,把JavaScript language version改成ECMAScript 6;

再Then..寫一段ES6代碼

'use strict';
// node直接運行ES6代碼時,如使用了ES6的一些關鍵字,比如let,就需要嚴格模式,否則會報錯
// 這是沒有嚴格模式時候的錯誤提示
// SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

function* fibs() {// Generator Function
let a = 0;
let b = 1;
while (true) {
yield a;
// [a, b] = [b, a + b];
b = a + b;
a = b - a;
}
}
let [first, second, third, fourth, fifth, sixth] = fibs();
console.log(first, second, third, fourth, fifth, sixth);

現在IDE會出現一個File watcher提示條

先別點Add watcher!我們要先去裝babel~

首先在根目錄新建一個package.json
{
"name": "test-project",
"version": "1.0.0"
}

然后打開IDE的Terminal,安裝babel-cli
npm install --save-dev babel-cli

Good! 現在可以去點Add watcher啦,點完之后會彈出一個框,其中大部分設置IDE都幫你搞定了

下面第三行,Program那一項,填

$ProjectFileDir$/node_modules/.bin/babel

然后點OK,這個時候你就會發現左邊多出來一個main-compiled.js文件啦

但是還沒搞定!現在只是搞定了自動轉換的功能,系統默認把ES6 compile成了ES6..(你應該會發現compile出來的東西跟原來的一樣..Generator函數并沒有被轉換成ES5的格式)

所以我們需要安裝Babel的preset以正確識別ES6代碼;

和剛才一樣,在npm安裝babel的ES6的preset
npm install --save-dev babel-preset-es2015

在根目錄下新建一個.babelrc文件(就是babel在當前項目的配置文件),寫上
{
"presets": [
"es2015"
]
}

OK搞定!保存再回去看一下main-compiled.js 應該就變成這個樣子啦,現在你在main.js里直接寫ES6代碼,IDE都會自動compile成ES5的代碼在這里啦~

注意:想直接用Node.js運行ES6代碼還是有些問題..因為這段代碼用的ES6的解構賦值Node.js還未完全支持,需要在運行的時候加入一些tags(以開啟Node.js的相關試驗特性),具體可以參考Node.js官網對ES6的說明:ECMAScript 2015 (ES6)。






查看完整回答
反對 回復 2019-08-24
?
PIPIONE

TA貢獻1829條經驗 獲得超9個贊

如果你問的是require或者import用法,那目前仍然需要通過babel或者traceur之類的轉義工具將之轉義為ES5語法,才能在瀏覽器里運行。但對于lodash庫本身,并不是非得利用webpack...之類的工具才能用,直接使用<script>標簽放在html里,就可以使用_了。

查看完整回答
反對 回復 2019-08-24
?
慕虎7371278

TA貢獻1802條經驗 獲得超4個贊

Babel默認只轉換新的JavaScript句法(syntax),而不轉換新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象,以及一些定義在全局對象上的方法(比如Object.assign)都不會轉碼。而且像import和export這兩個命令現在在任何瀏覽器中都是不支持的, 同時babel也無法將其轉換為瀏覽器支持的ES5, 原因在于:
babel只是個翻譯,假設a.js 里 import 了 b.js, 對a.js進行轉碼,只是翻譯了a.js,并不會把b.js的內容給讀取合并進來, 如果想在最終的某一個js里,包含 a.js,b.js 的代碼,那就需要用到打包工具
所以我在這里講解一下如何使用webpack工具將帶有import和export語法的JS文件, 通過打包工具生成所有瀏覽器都支持的單個JS文件.
1. 下載node.js和webpack
Node.js是一個基于Chrome JavaScript運行時建立的平臺, 用于方便地搭建響應速度快、易于擴展的網絡應用??梢哉f就是服務器端的JS. webpack是一個打包工具, 而它是依賴于node.js運行的.


查看完整回答
反對 回復 2019-08-24
  • 4 回答
  • 0 關注
  • 488 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號