一,安装包

npm install --save-dev babel-loader @babel/core
npm install @babel/preset-env --save-dev
npm install --save @babel/polyfill
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
npm install @babel/runtime-corejs2 -D 

二 然后配置webpack.config.js中的module

module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
}

三 然后在根目录的 .babelrc文件中配置

{
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"absoluteRuntime": false,
"corejs": 2,
"helpers": true,
"regenerator": true,
"useESModules": false
}
]
]
}

不在 .babelrc文件中配置也可以:

https://babeljs.io/setup#installation 有关于webpack的一些安装配置

{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options: {
// "presets": [["@babel/preset-env",{
// "targets": {
// "chrome": "67"
// },
// useBuiltIns: "usage",
// }]]
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"absoluteRuntime": false,
"corejs": 2,
"helpers": true,
"regenerator": true,
"useESModules": false
}
]
]
}
}

可以使的ES6语法变为ES5,向下兼容,还可以根据引用使用的不存在函数自动引入

四.loadsh  字符串连接函数 先安装 npm i loadsh -D

import _ from "loadsh";

console.log(_.join(['a', 'b', 'c'], '***'));

结果为:  a***b***c

webpack4 使用babel处理ES6语法的一些简单配置的更多相关文章

  1. 使用webpack+babel构建ES6语法运行环境

    1.前言 由于ES6语法在各个浏览器上支持的情况各不相同,有的浏览器对ES6语法支持度较高,而有的浏览器支持较低,所以为了能够兼容大多数浏览器,我们在使用ES6语法时需要使用babel编译器将代码中的 ...

  2. webpack中使用babel处理es6语法

    index.js const arr = [ new Promise(()=>{}), new Promise(()=>{}) ]; arr.map(item => { consol ...

  3. Webpack4 学习笔记三 ES6+语法降级为ES5

    前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 Webpack 将es6.es7语法降级为es5 需要通过 babel JavaScript编译器. 安装: npm i babel ...

  4. 利用babel将es6语法转es5的简单示例

    前言 Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行. 这意味着,你可以现在就用ES6编写程序,而不用担心现有环境是否支持. 文件目录结构 生成包管理配置文件pa ...

  5. Nginx Location 语法,与简单配置[转]

    一、介绍Nginx是俄罗斯人编写的十分轻量级的HTTP服务器,Nginx,它的发音为“engine X”, 是一个高性能的HTTP和反向代理服务器,同时也是一个IMAP/POP3/SMTP 代理服务器 ...

  6. webpack4与babel配合使es6代码可运行于低版本浏览器

    使用es6+新语法编写代码,可是不能运行于低版本浏览器,需要将语法转换成es5的.那就借助babel7转换,再加上webpack打包,实现代码的转换. 转换包括两部分:语法和API let.const ...

  7. 让浏览器兼容ES6语法(gulp+babel)

    使用gulp+babel搭建ES6环境 前言 我们查阅资料可以知道ECMAScript 2015(简称ES6)已经于2015年发布,由于用户使用的浏览器版本在安装的时候可能早于ES6的发布,而到了今天 ...

  8. 使用babel转码器,让浏览器支持es6语法

    ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,可是很多浏览器并不支持es6语法,所以我们需要一个转码工具, 把es6的语法转换成浏览器支持的javascr ...

  9. Sublime插件支持Sass编译和Babel解析ES6 & .sublime-build文件初探

    用Sublime Text蛮久了,配置配来配去的,每次换电脑都得重头再配过,奈何人老了脑子不中用了,得好好整理一些,下次换电脑就有得参考了.. 同事说,他的WebStorm简直太方便,自身集成了很多方 ...

随机推荐

  1. HTML重点总结

    HTML基础 1. 标题 HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的. <h1>这是一个标题</h1> <h2&g ...

  2. Supervisord远程命令执行漏洞(CVE-2017-11610)复现

    Supervisord远程命令执行漏洞(CVE-2017-11610)复现 文章首发在安全客 https://www.anquanke.com/post/id/225451 写在前面 因为工作中遇到了 ...

  3. DVWA靶场之Command Injection(命令行注入)通关

    Command Injection Low: <?php if( isset( $_POST[ 'Submit' ]  ) ) { // Get input $target = $_REQUES ...

  4. Linux下MySQL主从复制(Binlog)的部署过程

    什么是 MySQL 的主从复制 Mysql内建的复制功能是构建大型高性能应用程序的基础, 将Mysql数据分布到多个系统上,这种分布机制是通过将Mysql某一台主机数据复制到其它主机(slaves)上 ...

  5. javaWeb之Maven

    为什么要学这个技术? 在JavaWeb开发中,需要使用大量的jar包 如何能够让一个工具自动帮我们导入和配置这个jar包 一.Maven项目架构管理工具 核心思想:约定大于配置 有约束,不要去违反 M ...

  6. 利用VAR模型科学管理仓位,提升策略效率

    更多精彩内容,欢迎关注公众号:数量技术宅,也可添加技术宅个人微信号:sljsz01,与我交流. 期货行情瞬息万变,保证金体系决定了期货交易的杠杆属性.保证金放多了,资金利用率低,放少了,可能在大幅度的 ...

  7. java批量下载文件为zip包

    批量下载文件为zip包的工具类 package com.meeno.trainsys.util; import javax.servlet.http.HttpServletRequest; impor ...

  8. Specification排序orderby

    废话不多说直接贴代码 Specification<Course> sf = new Specification<Course>() { @Override public Pre ...

  9. SpringMVC之@ControllerAdvice

    @ControllerAdvice ,很多初学者可能都没有听说过这个注解,实际上,这是一个非常有用的注解,顾名思义,这是一个增强的 Controller.使用这个 Controller ,可以实现三个 ...

  10. SpringBoot学习之thymeleaf的使用

    thymeleaf介绍 简单说, Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP .相较与其他的模板引擎,它有如下三个极吸引人的特点: 1 ...