webpack Babel 浏览器兼容性

简介: webpack Babel 浏览器兼容性

还是先看版本对应号 版本不对应 否则会报错*
在这里插入图片描述

为了解决浏览器兼容性的问题使用webpack的babel插件进行低版本的浏览器识别到时髦的js语法

1.安装命令 (注意对应的版本号)

npm install -D babel-loader @babel/core@7.5.4 @babel/preset-env@7.5.4

2.配置webpack.config.js文件

在这里插入图片描述

 {
                test: /\.m?js$/,
                exclude: /(node_modules)/,//排除的目录
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']//babel中内容的转换规则工具
                    }
                }
            }

在你的打包主文件写一段js的语法测试:
在这里插入图片描述
进行打包 npm run build 命令都是自己配置的 不会的看之前的课程都是连续剧

npm  run  build

在这里插入图片描述
运行命令npm run dev 进行热加载

npm  run dev

ie的低版本都可以正常使用es6语法了
在这里插入图片描述

相关文章
|
10月前
|
JavaScript
Webpack Babel (编译ES6/7)
Webpack Babel (编译ES6/7)
62 0
|
2月前
|
自然语言处理 JavaScript 前端开发
拯救浏览器兼容性:Babel是前端开发的必备神器(一)
拯救浏览器兼容性:Babel是前端开发的必备神器
|
2月前
|
编解码 资源调度 前端开发
Webpack+Babel手把手带你搭建开发环境(内附配置文件)
Webpack+Babel手把手带你搭建开发环境(内附配置文件)
31 0
|
2月前
|
编解码 JavaScript 前端开发
Node.JS学习 | Babel | webpack | ES6
Node.JS学习 | Babel | webpack | ES6
56 0
|
12月前
|
编解码 资源调度 前端开发
Webpack+Babel手把手带你搭建开发环境(内附配置文件)
Webpack+Babel手把手带你搭建开发环境(内附配置文件)
102 0
|
12月前
|
Web App开发 JavaScript 前端开发
Edge浏览器报错IE解决 Expected identifier, string or number 配置 babel vue plugins Preset
Edge浏览器报错IE解决 Expected identifier, string or number 配置 babel vue plugins Preset
265 0
|
JavaScript 前端开发
【Vue 开发实战】实战篇 # 28:如何自定义Webpack和Babel配置
【Vue 开发实战】实战篇 # 28:如何自定义Webpack和Babel配置
162 0
【Vue 开发实战】实战篇 # 28:如何自定义Webpack和Babel配置
|
JSON 前端开发 JavaScript
webpack 中的 babel 的配置| 学习笔记
快速学习 webpack 中的 babel 的配置
149 0
|
前端开发 JavaScript
ES6 + Webpack + React + Babel 如何在低版本浏览器上愉快的玩耍(上)
## 起因 某天,某测试说:“这个页面在 IE8 下白屏,9也白。。” 某前端开发: 吭哧吭哧。。。一上午的时间就过去了,搞定了。 第二天,某测试说:“IE 又白了。。” 某前端开发: 吭哧吭哧。。。谁用的 `Object.assign`,出来我保证削不屎你。 ![](https://gw.alicdn.com/tfscom/TB1AR1.LXXXXXaNXpXXXXXX
12608 0
|
资源调度 前端开发
Plugin/Preset files are not allowed to export objects,webpack报错/babel报错的解决方法
1、为什么会报错 ?   这里抱着错误是因为 babel 的版本冲突。   多是因为你的 babel 依赖包不兼容。     可以查看你的 package.json 的依赖列表   即有 babel 7.
4902 0