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 getComputedStyle获取和设置style的原理
Oct 10 Javascript
JavaScript OOP类与继承
Nov 15 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
Jul 26 Javascript
jQuery焦点图切换特效插件封装实例
Aug 18 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
Mar 12 Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 Javascript
jQuery Easyui快速入门教程
Aug 21 Javascript
在JSP中如何实现MD5加密的方法
Nov 02 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
Dec 12 Javascript
JavaScript事件处理程序详解
Sep 19 Javascript
vue+vue-router转场动画的实例代码
Sep 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
如何对PHP程序中的常见漏洞进行攻击(下)
2006/10/09 PHP
[原创]PHP中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
合并ThinkPHP配置文件以消除代码冗余的实现方法
2014/07/22 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
php实现微信支付之现金红包
2018/05/30 PHP
关于php unset对json_encode的影响详解
2018/11/14 PHP
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
Vue概念及常见命令介绍(1)
2016/12/08 Javascript
vue中七牛插件使用的实例代码
2017/07/28 Javascript
js实现登录与注册界面
2017/11/01 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
2017/11/14 jQuery
layui实现点击按钮给table添加一行
2018/08/10 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
深入解析vue 源码目录及构建过程分析
2019/04/24 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
python使用opencv进行人脸识别
2017/04/07 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
python各类经纬度转换的实例代码
2019/08/08 Python
pycharm显示远程图片的实现
2019/11/04 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
python爬虫用mongodb的理由
2020/07/28 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
美国男士内衣品牌:Tommy John
2017/12/22 全球购物
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
妇科医生自荐信
2013/11/05 职场文书
电影地道战观后感
2015/06/04 职场文书