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 代码的方法小结
Jul 16 Javascript
Jquery 自定义动画概述及示例
Mar 29 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
获取非最后一列td值并将title设为该值的方法
Oct 30 Javascript
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
为指定的元素添加遮罩层的示例代码
Jan 15 Javascript
JavaScript实现简单的数字倒计时
May 15 Javascript
纯JS焦点图特效实例(可一个页面多用)
Dec 07 Javascript
Angular企业级开发——MVC之控制器详解
Feb 20 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 Javascript
Js中将Long转换成日期格式的实现方法
Jun 05 Javascript
JS中appendChild追加子节点无效的解决方法
Oct 14 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中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
PHP编程函数安全篇
2013/01/08 PHP
php防止伪造的数据从URL提交方法
2014/06/27 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
总结PHP中初始化空数组的最佳方法
2019/02/13 PHP
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
2017/01/08 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
Python图像处理之识别图像中的文字(实例讲解)
2018/05/10 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
Python微信操控itchat的方法
2019/05/31 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
教师一岗双责责任书
2014/04/16 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
给老师的保证书怎么写
2015/05/09 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
社区干部培训心得体会
2016/01/06 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书
MySQL如何使备份得数据保持一致
2022/05/02 MySQL