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 ...
随机推荐
- C# 多维数组
int[, ,] shuzu = new int[4, 3, 2]; //有四个二维数组,每个二维数组里面有3个1维数组,每个1维数组里面有2个元素
- golang学习之slice基本操作
slice的增删改查: //删除 func remove(slice []interface{}, i int) []interface{} { // copy(slice[i:], slice[i+ ...
- 503 Service Unavailable
转自:https://jingyan.baidu.com/article/6b1823099a258eba58e15902.html 第一 服务是不是被关闭了. 第二 原因IIS设置最大并发连接数 网 ...
- 5、static、final、匿名对象、内部类、包、修饰符、代码块
final关键字 final关键字概念 * A: 概述 继承的出现提高了代码的复用性,并方便开发.但随之也有问题,有些类在描述完之后,不想被继承, 或者有些类中的部分方法功能是固定的,不想让子类重写. ...
- netty源代码编译_mac os
工作中会用到netty,有随手整理笔记的习惯,故学习整理下,之前看过了理论知识,接下来就看下源码了,先来编译下 个人 fork git:https://github.com/ending06/nett ...
- 前端把html表格生成为excel表格
最近公司改后台管理系统.要求导出台账项目等等为excel表格,找半天还真有,他是通过query.table2excel.js 实现,原谅我原生不会弄这个当然大家有可以给我留言. <!DOCTYP ...
- Esri大数据分析引擎GeoAnalytics Server部署经历
系统架构 Base WebGIS 4Cores 16GB Spatiotemporal Data Store 32GB SSD Disk 足够大的空间 GA Server 4Cores 16GB 足够 ...
- LaTeX 使用：itemize,enumerate,description 用法
itemize和enumerate还有description 是LaTeX里列举的三种样式,分别讲一些使用技巧.itemize(意为分条目): \begin{itemize} \item[*] a \ ...
- Android链接蓝牙电子称
蓝牙一直是我内心屏蔽的一个模块哈哈哈哈!然而今天我不得不正视它了,我百度了看了好多因为需要设备匹配所以设备不在没办法测试,几天之后设备到了.因为没有接触过,看到返回的打印出来的菱形方块就以为是错了.于 ...
- 理解android中ListFragment和Loader
一直以来不知Android中Loader怎么用,今天晚上特意花了时间来研究,算是基本上搞明白了,现在把相关的注释和代码发出来,以便笔记和给网友一个参考,错误之处还望大家给我留言,共同进步,这个例子采用 ...