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 html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 Javascript
(function($){...})(jQuery)的意思
Jul 22 Javascript
JavaScript之引用类型介绍
Aug 10 Javascript
22点关于jquery性能优化的建议
May 28 Javascript
jQuery 插件开发指南
Nov 14 Javascript
讲解JavaScript中for...in语句的使用方法
Jun 03 Javascript
javascript表单验证大全
Aug 12 Javascript
Select2.js下拉框使用小结
Oct 24 Javascript
AngularJS实现路由实例
Feb 12 Javascript
AngularJS 支付倒计时功能实现思路
Jun 05 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
Apr 17 Javascript
JS运算符简单用法示例
Jan 19 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下打开URL地址的几种方法小结
2010/05/16 PHP
php 错误处理经验分享
2011/10/11 PHP
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
js Form.elements[i]的使用实例
2011/11/13 Javascript
jsp+javascript打造级连菜单的实例代码
2013/06/14 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
JavaScript实现控制打开文件另存为对话框的方法
2015/04/17 Javascript
laydate日历控件使用方法详解
2017/11/20 Javascript
vue 简单自动补全的输入框的示例
2018/03/12 Javascript
jQuery仿移动端支付宝键盘的实现代码
2018/08/15 jQuery
详解JWT token心得与使用实例
2019/08/02 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
js+canvas实现画板功能
2020/09/13 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
js定时器出现第一次延迟的原因及解决方法
2021/01/04 Javascript
Python实现计算两个时间之间相差天数的方法
2017/05/10 Python
python 用lambda函数替换for循环的方法
2018/06/09 Python
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
Python实现通过继承覆盖方法示例
2018/07/02 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
100行Python代码实现每天不同时间段定时给女友发消息
2019/09/27 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
零基础学Python之前需要学c语言吗
2020/07/21 Python
阿迪达斯奥地利官方商城:adidas.at
2016/10/16 全球购物
经典c++面试题六
2012/01/18 面试题
家具厂厂长岗位职责
2014/01/01 职场文书
工商治理实习生的自我评价
2014/01/15 职场文书
违反课堂纪律检讨书
2014/01/19 职场文书
学校联谊活动方案
2014/02/15 职场文书
上海世博会口号
2014/06/19 职场文书
低碳环保演讲稿
2014/08/28 职场文书
go语言基础 seek光标位置os包的使用
2021/05/09 Golang