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 相关文章推荐
如何实现JS函数的重载
Sep 22 Javascript
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
Aug 15 Javascript
js插件YprogressBar实现漂亮的进度条效果
Apr 20 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
jquery仿苹果的时间/日期选择效果
Mar 08 Javascript
vuejs使用递归组件实现树形目录的方法
Sep 30 Javascript
vue select二级联动第二级默认选中第一个option值的实例
Jan 10 Javascript
Angular学习教程之RouterLink花式跳转
May 03 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
May 25 Javascript
js array数组对象操作方法汇总
Mar 18 Javascript
Vue路由之JWT身份认证的实现方法
Aug 26 Javascript
Node.js实现简单管理系统
Sep 23 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
java微信开发之上传下载多媒体文件
2016/06/24 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
IE8下关于querySelectorAll()的问题
2010/05/13 Javascript
js继承的实现代码
2010/08/05 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
2011/10/21 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
2012/12/10 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
往光标所在位置插入值的js代码
2013/09/22 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
python使用心得之获得github代码库列表
2014/06/25 Python
在Django中实现添加user到group并查看
2019/11/18 Python
使用python实现哈希表、字典、集合操作
2019/12/22 Python
Opencv求取连通区域重心实例
2020/06/04 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
python 实现客户端与服务端的通信
2020/12/23 Python
Python机器学习工具scikit-learn的使用笔记
2021/01/28 Python
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
Html5定位终极解决方案
2020/02/05 HTML / CSS
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
《纸船和风筝》教学反思
2014/02/15 职场文书
荷叶母亲教学反思
2014/04/30 职场文书
学习雷锋标语
2014/06/25 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
2014年质量管理工作总结
2014/12/01 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android