详解webpack 配合babel 将es6转成es5 超简单实例


Posted in Javascript onMay 02, 2017

今天接触了webpack,第一次使用webpack进行转码,竟然稀里糊涂就成功了,哈哈。

下面附上流程

创建个文件夹,初始化一下,首先全局安装webpack

npm install webpack --save-dev

然后安装babel

npm install --save-dev babel-core babel-preset-es2015 
npm install --save-dev babel-loader

在当前文件夹内执行安装,然后创建两个文件夹一个src作为源文件夹,一个bin,保存生成的文件夹的列表

在src文件夹内创建一个文件app.js,里面写入现在浏览器不全支持的es6代码

let a = 111; 
let b = 222; 
var xxx = (c,d) => c*d; 
console.log(xxx(a,b));

然后在根目录创建一个文件名为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' 
    }] 
  } 
}

然后再创建一个用于babel调用的文件,名为.babelrc

里面写入

{ "presets": [ "es2015" ] }

然后在当前目录打开cmd,

运行命令 webpack

如果出现绿色的,证明成功了

然后去bin目录里面找到app.bundle.js发现里面下面会有这段代码

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));

证明转码成功~~~~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
关于编写性能高效的javascript事件的技术
Nov 28 Javascript
详解Bootstrap创建表单的三种格式(一)
Jan 04 Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 Javascript
JavaScript常见继承模式实例小结
Jan 11 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 Javascript
Vue基础学习之项目整合及优化
Jun 02 Javascript
微信小程序按钮点击动画效果的实现
Sep 04 Javascript
jQuery树插件zTree使用方法详解
May 02 #jQuery
JavaScript数据结构学习之数组、栈与队列
May 02 #Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
May 02 #Javascript
详解webpack+es6+angular1.x项目构建
May 02 #Javascript
jQuery Tree Multiselect使用详解
May 02 #jQuery
bootstrap的常用组件和栅格式布局详解
May 02 #Javascript
Vuejs实现带样式的单文件组件新方法
May 02 #Javascript
You might like
多数据表共用一个页的新闻发布
2006/10/09 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
PHP文件操作详解
2016/12/30 PHP
jquery处理json数据实例分析
2014/06/03 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
简单实现nodejs上传功能
2017/01/14 NodeJs
Angular组件化管理实现方法分析
2017/03/17 Javascript
vue v-model表单控件绑定详解
2017/05/17 Javascript
Node.js创建Web、TCP服务器
2017/12/05 Javascript
vue过滤器用法实例分析
2019/03/15 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python通过自定义isnumber函数判断字符串是否为数字的方法
2015/04/23 Python
Python中内置的日志模块logging用法详解
2016/07/12 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
浅谈pandas中Dataframe的查询方法([], loc, iloc, at, iat, ix)
2018/04/10 Python
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
python sys.argv[]用法实例详解
2018/05/25 Python
Python实现端口检测的方法
2018/07/24 Python
Python标准库shutil用法实例详解
2018/08/13 Python
python3 property装饰器实现原理与用法示例
2019/05/15 Python
python 中pyqt5 树节点点击实现多窗口切换问题
2019/07/04 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
css和css3弹性盒模型实现元素宽度(高度)自适应
2019/05/15 HTML / CSS
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
大二法英学生职业生涯规划范文
2014/02/27 职场文书
文秘自荐信
2014/06/28 职场文书
副主任竞聘演讲稿
2014/08/18 职场文书
大学迎新生的欢迎词
2019/06/25 职场文书