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 关闭IE6、IE7
Jun 01 Javascript
jQuery源码中的chunker 正则过滤符分析
Jul 31 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 Javascript
js中string和number类型互转换技巧(分享)
Nov 28 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
Javascript中的getter和setter初识
Aug 17 Javascript
jQuery中过滤器的基本用法示例
Oct 11 jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
Vue实现6位数密码效果
Aug 18 Javascript
vue之组件内监控$store中定义变量的变化详解
Nov 08 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 Javascript
vue页面更新patch的实现示例
Mar 25 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
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
2014/01/20 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
JS设置cookie、读取cookie
2016/02/24 Javascript
详解NodeJs开发微信公众号
2018/05/25 NodeJs
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
python处理圆角图片、圆形图片的例子
2014/04/25 Python
python中随机函数random用法实例
2015/04/30 Python
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
Python使用Pandas读写Excel实例解析
2019/11/19 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
Python通过文本和图片生成词云图
2020/05/21 Python
Python 解析xml文件的示例
2020/09/29 Python
python pymysql库的常用操作
2020/10/16 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
美国在线家装零售商:Build.com
2016/09/02 全球购物
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
电气工程自动化求职信
2014/03/14 职场文书
11.9消防日宣传标语
2014/10/08 职场文书
优秀团员事迹材料
2014/12/25 职场文书
2015年财务部工作总结
2015/04/10 职场文书
电影红河谷观后感
2015/06/11 职场文书
感恩教师主题班会
2015/08/12 职场文书
七年级语文教学反思
2016/03/03 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB
Windows Server 2016服务器用户管理及远程授权图文教程
2022/08/14 Servers