webpack中使用babel处理es6语法
const arr = [
new Promise(()=>{}),
new Promise(()=>{})
]; arr.map(item => {
console.log(item);
})
<!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>html template</title>
</head>
<body>
<div id='root'></div>
</body>
</html>
运行npx webpack(用dev-server打包放在了缓存里面，看不到最终的打包内容)。看到打包生成的main.js的最后几行，index里面写的js，原封不动的打包到了main.js里面。这个时候浏览器中运行，可以打印出promise对象。好像是没问题的，这是什么原因呢，这是因为chrome更新比较快，es6里面很多东西，他都做了实现，所以直接在chrome浏览器写es6语法没问题，但是比如在ie或者更新没那么快的浏览器，，，就会报错。。。
npm install --save-dev babel-loader @babel/core
webpack配置babel相关
module.exports = {
module: {
rules:[{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}]
}
}
npm install @babel/preset-env --save-dev
module.exports = {
module: {
rules:[{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options:{
"presets": ["@babel/preset-env"]
}
}]
}
}
import "@babel/polyfill"; const arr = [
new Promise(()=>{}),
new Promise(()=>{})
]; arr.map(item => {
console.log(item);
});
安装
npm install core-js --save-dev
module.exports = {
module: {
rules:[{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options:{
presets: [['@babel/preset-env',{
/**
* 当我做polyfill填充的时候，去加一些低版本特性的时候，我不是把所有特性都加进来
* 是根据你的业务代码来决定要加什么
*/
useBuiltIns: 'usage',
corejs: 3
}]]
}
}]
}
}
module.exports = {
module: {
rules:[{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options:{
presets: [['@babel/preset-env',{
/**
* 意思是我的这个项目，打包会运行在>67这个版本的chrome浏览器下
* 比如chrome浏览器在67版本以上对es6语法支持很好了，就不需要翻译
*/
targets: {
chrome: "67",
},
/**
* 当我做polyfill填充的时候，去加一些低版本特性的时候，我不是把所有特性都加进来
* 是根据你的业务代码来决定要加什么
* @babel/polyfill，放在js入口
*/
useBuiltIns: 'usage',
corejs: 3
}]]
}
}]
}
}
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
// import "@babel/polyfill"; const arr = [
new Promise(()=>{}),
new Promise(()=>{})
]; arr.map(item => {
console.log(item);
})
module.exports = {
module: {
rules:[{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options:{
"plugins": [["@babel/plugin-transform-runtime",{
"absoluteRuntime": false,
"corejs": 2,
"helpers": true,
"regenerator": true,
"useESModules": false
}]]
}
}]
}
}
{
"plugins": [["@babel/plugin-transform-runtime",{
"absoluteRuntime": false,
"corejs": 2,
"helpers": true,
"regenerator": true,
"useESModules": false
}]]
}
module.exports = {
module: {
rules:[{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}]
}
}
webpack中使用babel处理es6语法的更多相关文章
- 使用webpack+babel构建ES6语法运行环境
1.前言 由于ES6语法在各个浏览器上支持的情况各不相同,有的浏览器对ES6语法支持度较高,而有的浏览器支持较低,所以为了能够兼容大多数浏览器,我们在使用ES6语法时需要使用babel编译器将代码中的 ...
- Webpack 4.x 默认支持 ES6 语法
Webpack 4.x 默认支持 ES6 语法 Q: 为什么 webpack4 默认支持 ES6 语法的压缩? A: terser 里面实现了 ES6 语法的 AST解析. webpack 4 里使用 ...
- webpack中配置Babel
Babel是一个javascript编译器,可以将ES6和更新的js语法转换成ES5的,使代码在较老的浏览器里也能正常运行. 一.安装 npm install --save-dev babel-loa ...
- webpack中使用babel
step one: https://babeljs.io/setup Choose your tool (try CLI) select webpack Step two: npm install - ...
- webpack4 使用babel处理ES6语法的一些简单配置
一,安装包 npm install --save-dev babel-loader @babel/corenpm install @babel/preset-env --save-devnpm ins ...
- 在IDEA(phpStorm)中使用Babel编译ES6
安装Babel 官方文档建议我们根据单个项目进行本地安装,原因是不同的项目可以依赖不同版本的 Babel,使你的项目更方便移植.更易于安装. 在项目的根目录下使用命令行工具(CMD等)执行下面代码 n ...
- [转] webpack中配置Babel
一.安装 npm install --save-dev babel-loader babel-core babel-preset-env 二.在webpack.config.js中配置module 1 ...
- webstorm中.vue报错(es6语法报错)-转
1.webstorm中es6语法报错,解决方法: 打开 Settings => Languages & Frameworks => Javascript把 Javascript L ...
- webpack在nodejs中应用（支持es6语法及热加载）
安装 npm i webpack webpack-cli @babel/core babel-loader @babel/preset-env @babel/node clean-webpack-pl ...
随机推荐
- 十一、信号量控制Semaphore
一.简介 有时候我们需要对一个资源的访问做线程数控制,以防雪崩等问题. JDK中,信号量可以处理这样的问题:Semaphore JDK文档:http://tool.oschina.net/upload ...
- 二、hbase shell工具
hbase单节点安装请参考: https://www.cnblogs.com/lay2017/p/9944387.html 下文演示hbase shell工具常用的命令,首先启动hbase以及进入sh ...
- JAVA将数字钱数转换为大写
1.Java文件的编写 package com.cwai.xtag; import java.util.Scanner; public class Num2Rmb { private String[] ...
- maven私服的搭建
前言: 为什么要有maven私服? 当我们在公司开发时,如果每个程序员都需要连接外网去下载maven的jar包,当同时开发时,就会造成网络资源浪费,因此,maven提出了私服的概念,当公司内部程序员进 ...
- HDU X问题 中国剩余定理--求满足条件的个数
X问题 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- spss C# 二次开发 学习笔记（三）——Spss .Net 开发
Spss .Net 二次开发的学习过程暂停了一段时间,今天开始重启. 之前脑残的不得了,本想从网上下载一个Spss的安装包,然后安装学习.于是百度搜索Spss,在百度搜索框的列表中看到Spss17.S ...
- javascript函数中with的介绍
/*js函数中with函数的用法分析定义 方便用来引用某个对象中已有的属性但是不能用来给对象添加属性 要给对象创建新的属性 必须明确的引用该对象*/代码格式with(object) statement ...
- word-wrap，word-break，white-space
这3个属性都与换行有关,看看有啥区别. 语法介绍 [word-wrap] 定义:属性允许长单词或 URL 地址换行到下一行: 语法: word-wrap: normal|break-word; bre ...
- JSP总结摘要
一 概述 1.什么是JSP? Java Server Pages,服务器端负责页面展示的技术,可以嵌套java语言,以取代使用Servlet生成页面的方式,底层被转化为Servlet. 二 路径 1. ...
- mysql性能问题小解 Converting HEAP to MyIsam create_myisa
安定北京被性能测试困扰了N天,实在没想法去解决了,今天又收到上级的命令说安定北京要解决,无奈!把项目组唯一的DBA辞掉了,现在所以数据库的问题都得自己来处理:( 不知道上边人怎么想的.而且更不知道怎安 ...