溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1.babel
babel官方網址
2. 安裝
npm i babel-cli -g
通過上面命令進行babel的安裝,其中i表示安裝install的意思, -g表示安裝到全局
3.使用
創建文件es6.js
let num = [1,2,3,4]; let plusDouble = num.map(item => item * 2); console.log(plusDouble);
然后使用命令進行編譯:
babel es6.js -o compiled.js
然后就會在當前目錄下出現編譯之后的文件,就這樣,我們完成了編譯的過程,但是,當我們進行運行編譯之后的文件時,仍然會報錯,其實主要原因是上面的編譯沒有加約束條件,也就是沒有告訴babel去怎么編譯,那下面我們就進行對babel進行配置
4. 配置
(1)通過文件配置
在項目目錄下創建文件.babelrc,在文件中書寫如下代碼:,由于babel是通過插件的形式進行使用,所以在下面代碼中通過添加對象預設和插件
{
"presets": [],
"plugins": []
}
安裝插件,在下面這個插件的使用,可以將ES6代碼編譯為ES5代碼:
npm i --save-dev babel-preset-es2015
(代碼中--save-dev代表安裝在本地開發依賴中)
然后將.babelrc中的文件進行修改為以下內容:
{
"presets": ["es2015"],
"plugins": []
}
至此,我們已經配置完成,運行編譯命令即可得到下面的結果:
"use strict";
var num = [1, 2, 3, 4];
var plusDouble = num.map(function (item) {
return item * 2;
});
console.log(plusDouble);
運行之后能夠正常打印結果
現在我們能夠進行簡單的編譯,但是對于一些es7里邊的新特性還是有點限制,這樣,我們就的使用插件進行編譯,如下面所示對象展開符插件object-rest-spread,同樣的,我們使用命令進行安裝
npm i babel-plugin-transform-object-rest-spread --save-dev
同樣進行到插件中修改
{
"presets": ["es2015"],
"plugins": ["transform-object-rest-spread"]
}
然后通過代碼進行測試,在代碼中書寫如下內容(...為ES7中預先提出的設想):
let courses = { name: 'english', score: 90};
courses = { ...courses, comment: 'A'};
console.log(courses);
編譯之后的結果為:
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var courses = { name: 'english', score: 90 };
courses = _extends({}, courses, { comment: 'A' });
console.log(courses);
通過添加_extends方法將對象展開符進行轉化,運行代碼可正常輸出結果
(2)通過在webpack配置文件中進行其他屬性的加載配置
在webpack中,我們能夠通過各類加載器進行樣式的加載,在使用樣式加載的時候,通過下面鏈接進行查看:https://www.jb51.net/article/141096.htm
以上就是babel編譯es6文件的方法，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
