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

 更新时间:2017年05月02日 10:31:35   作者:专注前端30年  
本篇文章主要介绍了详解webpack 配合babel 将es6转成es5 超简单实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

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

下面附上流程

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

1
npm install webpack --save-dev

然后安装babel

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

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

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

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

然后在根目录创建一个文件名为webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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

里面写入

1
{ "presets": [ "es2015" ] }

然后在当前目录打开cmd,

运行命令 webpack

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

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

1
2
3
4
5
6
7
8
9
10
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));

证明转码成功~~~~

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

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:http://blog.csdn.net/qq_30100043/article/details/53402618

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • LayUi数据表格自定义赋值方式

    LayUi数据表格自定义赋值方式

    今天小编就为大家分享一篇LayUi数据表格自定义赋值方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • 浅谈如何使用webpack构建多页面应用

    浅谈如何使用webpack构建多页面应用

    这篇文章主要介绍了浅谈如何使用webpack构建多页面应用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 在JavaScript中使用严格模式(Strict Mode)

    在JavaScript中使用严格模式(Strict Mode)

    这篇文章主要介绍了在JavaScript中使用严格模式(Strict Mode),除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode)。顾名思义,这种模式使得Javascript在更严格的条件下运行。,需要的朋友可以参考下
    2019-06-06
  • 通过示例彻底搞懂js闭包

    通过示例彻底搞懂js闭包

    下面小编就为大家带来一篇通过示例彻底搞懂js闭包。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • js实现登录时记住密码的方法分析

    js实现登录时记住密码的方法分析

    这篇文章主要介绍了js实现登录时记住密码的方法,结合实例形式分析了JavaScript基于cookie实现存储登录密码相关操作技巧,需要的朋友可以参考下
    2020-04-04
  • 关于js注册事件的常用方法

    关于js注册事件的常用方法

    为了兼容各种浏览器,今天没事特意复习了一下js原生事件特性,对其封装一下。
    2013-04-04
  • JavaScript数据结构中串的表示与应用实例

    JavaScript数据结构中串的表示与应用实例

    这篇文章主要介绍了JavaScript数据结构中串的表示与应用,结合实例形式简单分析了基于javascript顺序操作实现串结构与串的拼接操作相关技巧,需要的朋友可以参考下
    2017-04-04
  • Javascript让DEDECMS告别手写Tag

    Javascript让DEDECMS告别手写Tag

    dedecms在编辑修改内容时,TAG标签需要手动输,中文的Tag, 中间还得用半角字符','分隔, 输入法切来切去很不方便, 于是动手改后台代码, 利用后台的tags_main.php, 让dedecms添加内容时能去tags_main里去选择.
    2014-09-09
  • js实现购物车商品数量加减

    js实现购物车商品数量加减

    这篇文章主要为大家详细介绍了js实现购物车商品数量加减,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • Javascript & DHTML上传文件控件

    Javascript & DHTML上传文件控件

    首先来做一个实例,批量上传的UI控件。以后一般做的示例也是以UI控件为主的。都是封装成Object或者用Function封装成"Class"类。
    2008-07-07

最新评论