詳解webpack 配合babel 將es6轉(zhuǎn)成es5 超簡(jiǎn)單實(shí)例
今天接觸了webpack,第一次使用webpack進(jìn)行轉(zhuǎn)碼,竟然稀里糊涂就成功了,哈哈。
下面附上流程
創(chuàng)建個(gè)文件夾,初始化一下,首先全局安裝webpack
npm install webpack --save-dev
然后安裝babel
npm install --save-dev babel-core babel-preset-es2015 npm install --save-dev babel-loader
在當(dāng)前文件夾內(nèi)執(zhí)行安裝,然后創(chuàng)建兩個(gè)文件夾一個(gè)src作為源文件夾,一個(gè)bin,保存生成的文件夾的列表
在src文件夾內(nèi)創(chuàng)建一個(gè)文件app.js,里面寫入現(xiàn)在瀏覽器不全支持的es6代碼
let a = 111; let b = 222; var xxx = (c,d) => c*d; console.log(xxx(a,b));
然后在根目錄創(chuàng)建一個(gè)文件名為webpack.config.js
module.exports = { entry: './src/app.js', output: { path: './bin', filename: 'app.bundle.js', }, module: { loaders: [{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }] } }
然后再創(chuàng)建一個(gè)用于babel調(diào)用的文件,名為.babelrc
里面寫入
{ "presets": [ "es2015" ] }
然后在當(dāng)前目錄打開cmd,
運(yùn)行命令 webpack
如果出現(xiàn)綠色的,證明成功了
然后去bin目錄里面找到app.bundle.js發(fā)現(xiàn)里面下面會(huì)有這段代碼
function(module, exports) { "use strict"; var a = 111; var b = 222; var xxx = function xxx(c, d) { return c * d; }; console.log(xxx(a, b));
證明轉(zhuǎn)碼成功~~~~
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Webpack4+Babel7+ES6兼容IE8的實(shí)現(xiàn)
- 詳解用Webpack與Babel配置ES6開發(fā)環(huán)境
- Webpack4 使用Babel處理ES6語法的方法示例
- 詳解webpack+ES6+Sass搭建多頁面應(yīng)用
- webpack4與babel配合使es6代碼可運(yùn)行于低版本瀏覽器的方法
- 詳解Webpack + ES6 最新環(huán)境搭建與配置
- webpack使用 babel-loader 轉(zhuǎn)換 ES6代碼示例
- es6+angular1.X+webpack 實(shí)現(xiàn)按路由功能打包項(xiàng)目的示例
- Webpack打包過程中處理ES6模塊的循環(huán)依賴問題小結(jié)
相關(guān)文章
PHP實(shí)現(xiàn)記錄代碼運(yùn)行時(shí)間封裝類實(shí)例教程
這篇文章主要給大家介紹了利用PHP實(shí)現(xiàn)記錄代碼運(yùn)行時(shí)間的封裝類的相關(guān)教程,文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí),需要的朋友可以參考下2017-05-05微信小程序緩存支持二次開發(fā)封裝實(shí)現(xiàn)解析
這篇文章主要介紹了微信小程序緩存支持二次開發(fā)封裝實(shí)現(xiàn)解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12使用uni-app開發(fā)微信小程序的實(shí)現(xiàn)
這篇文章主要介紹了使用uni-app開發(fā)微信小程序的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12JavaScript設(shè)計(jì)模式之構(gòu)造器模式(生成器模式)定義與用法實(shí)例分析
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之構(gòu)造器模式(生成器模式)定義與用法,結(jié)合實(shí)例形式分析了javascript構(gòu)造器模式的概念、原理、與工廠模式的區(qū)別以及相關(guān)使用方法,需要的朋友可以參考下2018-07-07詳解JavaScript的Date對(duì)象(制作簡(jiǎn)易鐘表)
這篇文章主要為大家詳細(xì)介紹了JavaScript的Date對(duì)象,和大家分享如何制作簡(jiǎn)易鐘表,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-12-12關(guān)于前后端json數(shù)據(jù)的發(fā)送與接收詳解
這篇文章主要給大家介紹了關(guān)于前后端json數(shù)據(jù)發(fā)送與接收的相關(guān)資料,文中通過示例代碼詳細(xì)介紹了關(guān)于flask中的json數(shù)據(jù)接收和前端發(fā)送json數(shù)據(jù)等內(nèi)容,需要的朋友可以參考借鑒,下面來一起看看吧。2017-07-07詳述 Sublime Text 打開 GBK 格式中文亂碼的解決方法
這篇文章主要介紹了詳述 Sublime Text 打開 GBK 格式中文亂碼的解決方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-10-10JavaScript 數(shù)組展平方法: flat() 和 flatMap()詳解
從 ES2019 中開始引入了一種扁平化數(shù)組的新方法,可以展平任何深度的數(shù)組,這篇文章主要介紹了JavaScript 數(shù)組展平方法: flat() 和 flatMap()詳解,需要的朋友可以參考下2023-06-06JavaScript使用Blob文件流下載txt、pdf、圖片等文件,自定義下載文件名
JavaScript使用Blob文件流下載txt、pdf、圖片等格式文件,同時(shí)自定義下載文件名,2023-08-08