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 数组运用实现代码
Apr 13 Javascript
Node.js插件的正确编写方式
Aug 03 Javascript
JQuery删除DOM节点的方法
Jun 11 Javascript
使用RequireJS库加载JavaScript模块的实例教程
Jun 06 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
Aug 03 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
Aug 31 Javascript
Webpack优化配置缩小文件搜索范围
Dec 25 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
Jul 10 Javascript
如何基于JavaScript判断图片是否加载完成
Dec 28 Javascript
JS实现轮播图效果
Jan 11 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 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
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
IE 下的只读 innerHTML
2009/08/21 Javascript
JQuery 网站换肤功能实现代码
2009/11/02 Javascript
javaScript call 函数的用法说明
2010/04/09 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
2014/07/23 Javascript
node.js中的buffer.toJSON方法使用说明
2014/12/14 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
2015/06/14 Javascript
jQuery插件datatables使用教程
2016/04/21 Javascript
全面解析Bootstrap中transition、affix的使用方法
2016/05/30 Javascript
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
python实现ipsec开权限实例
2014/11/11 Python
TensorFlow在MAC环境下的安装及环境搭建
2017/11/14 Python
Python使用SQLite和Excel操作进行数据分析
2018/01/20 Python
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
Python list列表中删除多个重复元素操作示例
2019/02/27 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
python django下载大的csv文件实现方法分析
2019/07/19 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
Django models filter筛选条件详解
2020/03/16 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
美国名牌太阳镜折扣网站:Eyedictive
2017/05/15 全球购物
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
优质有机椰子产品:Dr. Goerg
2019/09/24 全球购物
会展中心部门工作职责
2013/11/27 职场文书
2014全国两会学习心得体会1000字
2014/03/10 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
python中取整数的几种方法
2021/11/07 Python
JavaScript实现两个数组的交集
2022/03/25 Javascript