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 相关文章推荐
JScript中的&quot;this&quot;关键字使用方式补充材料
Mar 08 Javascript
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
May 08 Javascript
js判断当前浏览器类型,判断IE浏览器方法
Jun 02 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
Oct 29 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
Aug 05 Javascript
实例解析Array和String方法
Dec 14 Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 Javascript
el-select 下拉框多选实现全选的实现
Aug 02 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 Javascript
js实现详情页放大镜效果
Oct 28 Javascript
小程序自定义轮播图圆点组件
Jun 25 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采用file_get_contents代替使用curl实例
2014/11/07 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
基于php的CMS中展示文章类实例分析
2015/06/18 PHP
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
canvas时钟效果
2017/02/16 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
详解webpack require.ensure与require AMD的区别
2017/12/13 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
JavaScript获取当前url路径过程解析
2019/12/27 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
Python中模拟enum枚举类型的5种方法分享
2014/11/22 Python
Python解决鸡兔同笼问题的方法
2014/12/20 Python
用pickle存储Python的原生对象方法
2017/04/28 Python
基于python requests库中的代理实例讲解
2018/05/07 Python
Django项目中包含多个应用时对url的配置方法
2018/05/30 Python
python调用百度语音REST API
2018/08/30 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
python构建指数平滑预测模型示例
2019/11/21 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
Cocopanda波兰:购买化妆品、护肤品、护发和香水
2020/05/25 全球购物
初级Java程序员面试题
2016/03/03 面试题
清洁工表扬信
2014/01/08 职场文书
2015年小学图书室工作总结
2015/05/18 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python