webpack4与babel配合使es6代码可运行于低版本浏览器的方法


Posted in Javascript onOctober 12, 2018

使用es6+新语法编写代码,可是不能运行于低版本浏览器,需要将语法转换成es5的。那就借助babel转换,再加上webpack打包,实现代码的转换。

转换包括两部分:语法和API

let、const这些是新语法。

new promise()等这些是新API。

简单代码

类库 utils.js

const name = 'weiqinl'

let year = new Date().getFullYear()

export { name, year }

index.js

import _ from 'lodash'

import { name, year } from './utils'



Promise.resolve(year).then(value => {

 console.log(`${name} - ${value} - ${_.add(1, 2)}`)

})

babel转换

安装babel编译器和对应的运行时环境

npm install -D @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/polyfill

并新建 .babelrc 文件,里面可以配置很多东西,内容为:

{

 "presets": [

  ["@babel/preset-env", {

   "useBuiltIns": "usage",

   "modules": false

  }]

 ],

 "plugins": [

  [

   "@babel/plugin-transform-runtime", {

    "corejs": false,

    "helpers": false,

    "regenerator": false,

    "useESModules": false

   }

  ]

 ],

 "comments": false

}

webpack构建

webpack4,可以零配置构建项目,那是因为它的很多配置值都默认了。在这里,我们需要自己配置。

创建一个 webpack.config.js 文件

const path = require('path');

module.exports = {

 mode: "production",

 entry: ['@babel/polyfill', './src/index.js'],

 output: {

  path: path.resolve(__dirname, 'dist'),

  filename: '[name].bundle.js'

 },

 module: {

  rules: [{

   test: /\.js$/,

   include: [

    path.resolve(__dirname, 'src')

   ],

   exclude: /(node_modules|bower_components)/,

   loader: "babel-loader",

  }]

 }

}

使用

webpack构建打包好的js文件,我们将其引入到html文件。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>webpack-babel-es6</title>
</head>
<body>
 webpack构建由babel转码的es6语法,支持es6语法和API<br />
 请查看浏览器控制台
 <script src="./dist/main.bundle.js"></script>
</body>
</html>

运行该html,可以看到控制台有内容输出 weiqinl - 2018 - 3

最后的目录结构:

webpack4与babel配合使es6代码可运行于低版本浏览器的方法

可以git查看源码https://github.com/weiqinl/demo/tree/master/webpack-bable-es6

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

Javascript 相关文章推荐
权威JavaScript 中的内存泄露模式
Aug 13 Javascript
关于jQuery中.attr()和.prop()的问题探讨
Sep 06 Javascript
Ajax提交与传统表单提交的区别说明
Feb 07 Javascript
toggle()隐藏问题的解决方法
Feb 17 Javascript
使用jQuery在对象中缓存选择器的简单方法
Jun 30 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
js实现带进度条提示的多视频上传功能
Dec 13 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
详解vue 2.6 中 slot 的新用法
Jul 09 Javascript
vue图片加载失败时用默认图片替换的方法
Aug 29 Javascript
在JS循环中使用async/await的方法
Oct 12 #Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 #Javascript
vue项目环境变量配置的实现方法
Oct 12 #Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 #Javascript
原生JS实现轮播图效果
Oct 12 #Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 #Javascript
Element Input组件分析小结
Oct 11 #Javascript
You might like
40年前的这部特摄片恐龙特级克塞号80后的共同回忆
2020/03/08 日漫
打造计数器DIY三步曲(中)
2006/10/09 PHP
PHP中的float类型使用说明
2010/07/27 PHP
PHP中使用unset销毁变量并内存释放问题
2012/07/05 PHP
md5 16位二进制与32位字符串相互转换示例
2013/12/30 PHP
浅谈PHP的数据库接口和技术
2016/12/09 PHP
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
JavaScript 对象的属性和方法4种不同的类型
2010/03/19 Javascript
flexigrid 参数说明
2010/11/23 Javascript
在JQuery dialog里的服务器控件 事件失效问题
2010/12/08 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
2012/06/15 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
2013/11/08 Javascript
js实现单行文本向上滚动效果实例代码
2013/11/28 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
js实现简洁大方的二级下拉菜单效果代码
2015/09/01 Javascript
理解javascript正则表达式
2016/03/08 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
2016/07/07 Javascript
Bootstrap风格的WPF样式
2016/12/07 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
JS简单实现数组去重的方法分析
2017/10/14 Javascript
js读取本地文件的实例
2017/12/22 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
JS开发常用工具函数(小结)
2019/07/04 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
[53:21]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-CDEC
2014/05/22 DOTA
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
Python中Continue语句的用法的举例详解
2015/05/14 Python
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
2019/09/27 HTML / CSS
中专生毕业自我鉴定
2013/11/01 职场文书
郭明义电影观后感
2015/06/08 职场文书
实验室安全管理制度
2015/08/05 职场文书