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 相关文章推荐
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
jQuery 标题的自动翻转实现代码
Oct 14 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
Aug 18 Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
Angular2搜索和重置按钮过场动画
May 24 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 Javascript
微信小程序数据分析之自定义分析的实现
Aug 17 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
Sep 10 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
Jun 11 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 checkbox 取值详细说明
2010/08/19 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
windows下更新npm和node的方法
2017/11/30 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
2020/09/16 Javascript
浅析Python中的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
ubuntu中配置pyqt4环境教程
2017/12/27 Python
python距离测量的方法
2018/03/06 Python
Python基于WordCloud制作词云图
2019/11/29 Python
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
深入了解NumPy 高级索引
2020/07/24 Python
CSS3使用border-radius属性制作圆角
2014/12/22 HTML / CSS
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
智利最大的网上商店:Linio智利
2016/11/24 全球购物
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
shell的种类有哪些
2015/04/15 面试题
银行毕业实习自我鉴定
2013/09/19 职场文书
学生党支部先进事迹
2014/02/04 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
《陋室铭》教学反思
2014/02/26 职场文书
交警个人先进事迹材料
2014/05/11 职场文书
送温暖献爱心活动总结
2014/07/08 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript
windows系统搭建WEB服务器详细教程
2022/08/05 Servers