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# 条码生成类
using System.Collections; using System.Text.RegularExpressions; namespace DotNet.Utilities { public ...
- GPUImage使用
GPUImage项目下载地址:https://github.com/BradLarson/GPUImage.git 下载项目时如果下载不下来可以直接check一份(之前下载了好多次都是下载失败,最后没 ...
- java虚拟机的内存机制
我们都知道,java程序的跨平台性离不开java虚拟机,虚拟机隔绝了底层操作系统,使得java程序可以直接运行在虚拟机之上.所以,对java的学习,离不开对java虚拟机的学习与了解.下面简单整理下j ...
- 十二、spark MLlib的scala示例
简介 spark MLlib官网:http://spark.apache.org/docs/latest/ml-guide.html mllib是spark core之上的算法库,包含了丰富的机器学习 ...
- Windbg 脚本命令简介 二， Windbg command
Windbg 脚本命令简介 二, Windbg script command $<, $><, $$<, $$><, $$>a< (Run Scri ...
- MongoDB客户端及监控工具
现在许多应用都使用MongoDB存储大量的业务数据,MongoDB基于文档式的存储,在大数据行业的应用还是很普遍的.MongoDB的客户端工具也很多,基于web的却不多,国产的就更少了,下面这款国产的 ...
- 一个简单IOC与DI示例
1.通过bean工厂实现读取xml文件,并实例化对象,实现自动注入. package com.pri.test; import com.pri.factory.BeanFactory; import ...
- ajax+json+ashx实现一个页面多个tab的分页
1:项目功能需求:我的荣誉.审核中的荣誉.审核通过的荣誉在一个页面分别作列表展示.每个tab都需要分页,对实现的功能做个简单总结. 2:前台页面:引用的DBPage.js和pageCss.css实现分 ...
- C#画个控件,指定字符特殊颜色显示
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- BZOJ4162：shlw loves matrix II
传送门 利用Cayley-Hamilton定理,用插值法求出特征多项式 \(P(x)\) 然后 \(M^n\equiv M^n(mod~P(x))(mod~P(x))\) 然后就多项式快速幂+取模 最 ...