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 数据选择插件Pickerbox使用介绍
Aug 24 Javascript
js 鼠标移动显示图片的简单实例
Dec 25 Javascript
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
Dec 31 Javascript
jquery实现鼠标拖动图片效果示例代码
Jan 09 Javascript
微信小程序 获取设备信息 API实例详解
Oct 02 Javascript
基于JavaScript实现随机颜色输入框
Dec 10 Javascript
JS+HTML5实现图片在线预览功能
Jul 22 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
Mar 25 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 Javascript
VSCode搭建React Native环境
May 07 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_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
php模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
PHP GD库生成图像的几个函数总结
2014/11/19 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
php将print_r处理后的数据还原为原始数组的解决方法
2016/11/02 PHP
redis+php实现微博(三)微博列表功能详解
2019/09/23 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
jQuery使用ajax跨域获取数据的简单实例
2016/05/18 Javascript
JavaScript中Number对象的toFixed() 方法详解
2016/09/02 Javascript
浅述Javascript的外部对象
2016/12/07 Javascript
node文件上传功能简易实现代码
2017/06/16 Javascript
Require.js的基本用法详解
2017/07/03 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
2018/11/30 Javascript
Python中的pass语句使用方法讲解
2015/05/14 Python
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
教你用Python写安卓游戏外挂
2018/01/11 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
python随机数分布random均匀分布实例
2019/11/27 Python
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
墨西哥网上超市:Superama
2018/07/10 全球购物
Bally巴利中国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/10/09 全球购物
美国爆米花工厂:The Popcorn Factory
2019/09/14 全球购物
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
如何实现一个自定义类的序列化
2012/05/22 面试题
西安众合通用.net笔试题
2013/03/18 面试题
大家访活动实施方案
2014/03/10 职场文书
股权收购意向书
2014/04/01 职场文书
节约用电标语
2014/06/17 职场文书
为自己工作观后感
2015/06/11 职场文书
预备党员入党感想
2015/08/10 职场文书