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 布尔型分析
Dec 22 Javascript
JavaScript转换农历类实现及调用方法
Jan 27 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
javascript实现数组中的内容随机输出
Aug 11 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 Javascript
seajs学习教程之基础篇
Oct 20 Javascript
jquery延迟对象解析
Oct 26 Javascript
webpack 2的react开发配置实例代码
Jul 28 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 Javascript
vue-cli中使用高德地图的方法示例
Mar 28 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
espresso double下 咖啡粉超细时 饼压力对咖啡的影响
2021/03/03 冲泡冲煮
PHP中如何定义和使用常量
2013/02/28 PHP
简单实现限定phpmyadmin访问ip的方法
2013/03/05 PHP
easyui的tabs update正确用法分享
2014/03/21 PHP
PHP用户管理中常用接口调用实例及解析(含源码)
2017/03/09 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
2016/12/26 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
python使用mailbox打印电子邮件的方法
2015/04/30 Python
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
Python实现KNN邻近算法
2021/01/28 Python
WxPython建立批量录入框窗口
2019/02/27 Python
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
Python 可视化神器Plotly详解
2020/12/26 Python
Python使用tkinter制作在线翻译软件
2021/02/22 Python
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
电气工程师岗位职责
2014/01/01 职场文书
精通CAD能手自荐书
2014/01/31 职场文书
低碳生活倡议书
2014/04/14 职场文书
个人担保书范文
2014/05/20 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
安徽导游词
2015/02/12 职场文书
个人党性分析总结
2015/03/05 职场文书
初中政治教学反思
2016/02/23 职场文书
2019年幼儿园管理条例范本!
2019/07/17 职场文书