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 相关文章推荐
JQuery 无废话系列教程(二) jquery实战篇上
Jun 23 Javascript
关于document.cookie的使用javascript
Oct 29 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
jquery 实现两级导航菜单附效果图
Mar 07 Javascript
js确认删除对话框适用于a标签及submit
Jul 10 Javascript
js实现的后台左侧管理菜单代码
Sep 11 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 Javascript
ES6实现的遍历目录函数示例
Apr 07 Javascript
JavaScript的六种继承方式(推荐)
Jun 26 Javascript
Vue Promise的axios请求封装详解
Aug 13 Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
Oct 09 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
超级简单的发送邮件程序
2006/10/09 PHP
PHP 七大优势分析
2009/06/23 PHP
PHP获取url的函数代码
2011/08/02 PHP
php将mysql数据库整库导出生成sql文件的具体实现
2014/01/08 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
不使用中间变量,交换int型的 a, b两个变量的值。
2010/10/29 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
2018/02/13 jQuery
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
vue 解决兄弟组件、跨组件深层次的通信操作
2020/07/27 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
2020/09/11 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片
2015/02/07 DOTA
Python中的魔法方法深入理解
2014/07/09 Python
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
python中对_init_的理解及实例解析
2019/10/11 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
Python实现直播推流效果
2019/11/26 Python
python 如何停止一个死循环的线程
2020/11/24 Python
文明餐桌行动实施方案
2014/02/19 职场文书
校园绿化美化方案
2014/06/08 职场文书
奥林匹克的口号
2014/06/13 职场文书
知识就是力量演讲稿
2014/09/13 职场文书
生产操作工岗位职责
2014/09/16 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
教师听课评语大全
2014/12/31 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
创业计划书之服装
2019/10/07 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
Python中的xlrd模块使用整理
2021/06/15 Python
5种 JavaScript 方式实现数组扁平化
2021/10/05 Javascript