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 ...
随机推荐
- PL/SQL之存储过程和函数
1.创建存储过程 .1语法: CREATE[OR REPLACE] PROCEDURE [schema.] procedure_name[(argument[{IN|OUT|IN OUT}] data ...
- java中equal和==的比较
equals 方法是 java.lang.Object 类的方法. 有两种用法说明: (1)对于字符串变量来说,使用“==”和“equals()”方法比较字符串时,其比较方法不同. “==”比较两个变 ...
- ASP.NET 解决在点击Button执行服务器事件之前验证用户输入并阻塞
在网站项目开发时,为了减少用户的错误性的操作,很多时候我们都需要做一些必要的JS验证来提醒用户,比如:“输入的值不符合规则,请重新输入”.“提交后无法修改,您确定要继续吗?”友好性的提示. 这时候我们 ...
- C#学习笔记-外观模式
题目:股民买卖股票 实现: static void Main(string[] args) { Stock1 gu1 = new Stock1(); Stock2 gu2 = new Stock2() ...
- position布局影响点击事件以及冒泡获取事件目标
在编写功能时总是会出现很多意想不到的问题,现在就讲讲我遇到的两个问题,通过举一个相似的例子来解说. <1> 元素互相独立,不存在包含于被包含 选择城市的按钮,为它绑定点击事件,点击后就弹出 ...
- layui-open-上传文件
<!--选择文件上传--> <script id="upload_file_dialog" type="text/html"> < ...
- JDBC中处理事务，小Demo
事务的四大特性(ACID): 原子性(Atomicity):事务中所有操作是不可再分割的原子单位.事务中所有操作要么全部执行成功,要么全部执行失败. 一致性(Consistency):事务执行 ...
- LintCode2016年8月22日算法比赛----平面列表
平面列表 题目描述 给定一个列表,该列表中的每个要素要么是个列表,要么是整数.将其变成一个只包含整数的简单列表. 注意事项 如果给定的列表中的要素本身也是一个列表,那么它也可以包含列表. 样例 给定 ...
- mustache 模板，用于构造html页面内容
Mustache 的模板语法很简单,就那么几个: {{data}} {{#data}} {{/data}} {{^data}} {{/data}} {{.}} {{<partials}} {{{ ...
- Keras 自适应Learning Rate (LearningRateScheduler)
When training deep neural networks, it is often useful to reduce learning rate as the training progr ...