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 相关文章推荐
Whatever:hover 无需javascript让IE支持丰富伪类
Jun 29 Javascript
jQuery插件passwordStrength密码强度指标详解
Jun 24 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
Aug 06 Javascript
Three.js快速入门教程
Sep 09 Javascript
快速掌握jQuery插件WebUploader文件上传
Nov 07 Javascript
基于vue2的table分页组件实现方法
Mar 20 Javascript
jquery animate动画持续运动的实例
Nov 29 jQuery
详解Vue源码学习之callHook钩子函数
Jul 25 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 Javascript
js 解析 JSON 数据简单示例
Apr 21 Javascript
VSCode搭建Vue项目的方法
Apr 30 Javascript
解决VUEX的mapState/...mapState等取值问题
Jul 24 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
德生1994机评
2021/03/02 无线电
php计算数组相同值出现次数的代码(array_count_values)
2015/01/20 PHP
Yii2中添加全局函数的方法分析
2017/05/04 PHP
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
JS案例分享之金额小写转大写
2014/05/15 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
轻松创建nodejs服务器(2):nodejs服务器的构成分析
2014/12/18 NodeJs
js实现精确到秒的日期选择器完整实例
2016/04/30 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
浅谈Node.js:fs文件系统模块
2016/12/08 Javascript
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
微信小程序保持session会话的方法
2020/03/20 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
2020/10/14 Javascript
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
python实现登陆知乎获得个人收藏并保存为word文件
2015/03/16 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
Python3视频转字符动画的实例代码
2019/08/29 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
SQL中where和having的区别
2012/06/17 面试题
中职生自荐信
2013/10/13 职场文书
迟到检讨书5000字
2014/01/31 职场文书
新年寄语大全
2014/04/12 职场文书
《骑牛比赛》教后反思
2014/04/22 职场文书
白莲教口号
2014/06/18 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
小型婚礼主持词
2015/06/30 职场文书
2015年征兵工作总结
2015/07/23 职场文书
Golang bufio详细讲解
2022/04/21 Golang