使用webpack3.x以及babel使浏览器支持es6语法

最新推荐文章于 2023-04-14 16:11:24 发布
最新推荐文章于 2023-04-14 16:11:24 发布
阅读量1.1k 收藏
点赞数 5
分类专栏： 杂谈 前端 webgis openlayers arcgis api for javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cj9551/article/details/85636451
版权
本文介绍了如何借助webpack3.x和babel解决浏览器对es6语法支持不足的问题。首先通过npm初始化项目，然后安装lodash、babel及运行时环境、webpack-cli等依赖。接着配置.babelrc和webpack.config.js文件，最后将es6代码打包成es5，通过在HTML中引入转换后的文件，验证转换成功。
摘要由CSDN通过智能技术生成

前言

当前浏览器对于es6语法支持程度还不是很高，我们可以通过webpack打包工具以及babel等转换es6语法，来实现浏览器支持es6语法。当然也有很多工具可以进行转换，比如使用SystemJS都可以，SystemJS有一个缺点就是网速要不好，特别慢，不过他也是很方便的，不用像在webpack中进行配置很多，只需要在script标签中引入，或者是npm安装就可以使用，不需要配置很多，这样可以使我们专注于代码的编写，我这里是使用webpack以及babel进行转换，通过安装了lodash来测试是否转换成功。

实现步骤
  1. 首先我们通过npm init命令来初始化我们的工程。一路y就可以，会生成一个packe.json配置文件；输入下面的命令；
npm init

生成一个配置文件packe.json，内容如下

{
   
  "name": "e
了解本专栏 订阅专栏 解锁全文 超级会员免费看
jiegiser#
关注
专栏目录
订阅专栏
在Webpack4.x环境下使用Babel转换ES6语法
"✧treasure mountain✧"
04-25 5970
一、介绍 在Webpack中 默认只能转换一部分ES6的新语法 部分更高级的ES6语法或ES7语法 Webpack无法转换 比如： ES6中类的静态属性 class Person{ static info={name:"Mike",age:18} } console.log(Person.info) 此时 Webpack默认打包的时候会报错 需要借助第三方loader来处理这些高级的语法...
使用Babel解决ES6+兼容问题（简单版）
老曹的博客
06-10 8803
现在大部分浏览器还是支持ES6的，一般兼容性解决还是解决IE浏览器的问题，原理其实就是把ES6的代码转化为ES5再去执行，相当于编译。 在线编译（不推荐） 在线编译，浏览器需要一行行地转换，效率十分低，所以不推荐 首先找个地方创建一个文件夹babel，在babel里面创建一个demo.html，写入ES6代码 <script> let a = 10; let b =...
webpack(3)_编译ES6
renzhongrui的博客
03-11 537
使用babel编译ES6语法 javascript的ES2015[es6]规范出来以后，许多浏览器都开始支持ES6语法，但是很多低版本浏览器还不兼容，甚至一些高版本浏览器也不是完全支持ES6语法，所以需要使用Babe来将ES6代码转为ES5代码，从而在能够在浏览器上运行。 babeljs官网：https://babeljs.cn/ babel安装 初始化工程 1、创建工程空目录Te...
webpack 3.X学习之Babel配置
weixin_30678349的博客
11-23 134
Babel是什么 Babel是一个编译JavaScript的平台，它的强大之处表现在可以通过编译帮你达到： 使用下一代的javascript（ES6，ES7,……）代码，即使当前浏览器没有完成支持； 使用基于JavvScript进行扩展语言，比如React的JSX； webpack配置Babel 安装依赖包： npm install --save-dev babel-core bab...
webpack3+babel+react 配置 支持 es6中的import()
weixin_30883271的博客
11-14 151
webpack3+babel+react 在使用这个配置环境时，需要用到es6 import 动态加载模块。webpack 3 以上版本，官方说 已经支持， 结果 跑起来报 unexperted token，网上 搜了一堆资料 也没有解决。最好，发现import() 是在 stage 3 ofthe TC39 process提议的，果断在 install babel-pr...
webpack+babel构建ES6语法运行环境
难凉热血的博客
01-15 1265
由于ES6语法在各个浏览器上支持的情况各不相同，所以在使用ES6语法时需要使用babel经过一次编译，将ES6语法编译为ES5语法，下面就开始搭建一个基于webpack+babel的ES6语法运行环境：1.需要安装的包 webpack(安装webpack，必装) babel-loader和babel-core(babel转码器，必装) babel-preset-es2015(转码规则，以es2015
webpack4.x下babel的安装、配置及使用详解
10-17
在本文中，我们将详细探讨如何在Webpack 4.x版本中安装、配置和使用Babel。ES6（ES2015）是一种被广泛使用的现代JavaScript语法，其具有更简洁和功能更强大的特点。然而，并非所有的浏览器都完全支持ES6语法。因此，...
babel浏览器兼容
shay的博客
03-28 524
package.json中 "scripts": { "buildmode": "vue-cli-service build --modern", }, 使用该指令打包项目，会以“现代模式”打包项目，实质上会打两个包，但是看起来和一般的dist是一样的，会根据用户浏览器的版本自动选择要给用户使用新的语法版本还是旧的语法版本。缺点是因为实质上是两个包，所以包会变大 "browserslist": [ "last 26 Chrome versions" ] 加这一句意思是“向前兼容多少个版本
webpack3实战（3）打包有es6、es7语法的js代码
qq20004604的博客
11-29 2129
前注：文档全文请查看 根目录的文档说明。如果可以，请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里，发【Issues】。实战项目示例目录1、需求列表1、html文件引入的js文件，需要使用es6、es7的语法；2、使用的语法里，除了常规的es6语法外，还包括例如Promise、async等特殊特性，要求可以转换。注：babel默认只转js语法，而不转换新的API，例如Iterator
常见的Webpack Babel用来解析ES6语法的插件
最新发布
fuweihan00的博客
04-14 683
7. @babel/plugin-transform-regenerator：用于将使用async/await关键字的异步函数转换为ES5的生成器函数。4. @babel/plugin-transform-template-literals：用于将模板字面量转换为普通字符串拼接。1. @babel/plugin-transform-arrow-functions：用于将箭头函数转换为普通函数。6. @babel/plugin-transform-object-assign：用于将对象的扩展运算符转换为。
webpack打包转换es6_webpack4与babel配合使es6代码可运行于低版本浏览器的方法
weixin_39743423的博客
12-20 231
使用es6+新语法编写代码，可是不能运行于低版本浏览器，需要将语法转换成es5的。那就借助babel转换，再加上webpack打包，实现代码的转换。转换包括两部分：语法和APIlet、const这些是新语法。new promise()等这些是新API。简单代码类库 utils.jsconst name = 'weiqinl'let year = new Date().getFullYear()ex...
ES6 语法转化之 Babel-cli 插件的使用
iissoftware的博客
05-14 2326
在我们使用es6语法时，大部分语法在低版本浏览器上是不支持的，所以，我们需要借助第三方插件来转化es6语法，使得浏览器能够识别的语法。 通常使用babel插件来帮助我们转化es6语法： 1、在项目根目录使用 npm init -y 生成一个 package.json 文件。-y表示默认所有选项都同意。 2、 全局安装 babel-cli： npm install -g babel-...
webpack中babel（编译ES6）语法最新版本
xingmanglang的博客
11-05 473
在babel中@babel/preset-env主要的功能是依据项目经过babel编译构建后产生的代码所对应运行的目标平台。其中@babel/plugin-transform-*。这些插件的工作主要就是babel在处理代码的过程当中对于新的 ES 语法的转换。 1 因为在babel7.4以后@babel/preset-env就被弃用了，所以写法也有所不同，最新的写法（亲测可用）在babelrc文件下配置 { "presets": [ [...
webpack babel-loader转换es6+用到的库、插件及配置
u010234868的专栏
09-23 527
安装babel-core、babel-loader、babel-preset-env、babel-plugin-transform-runtime： cnpm i babel-core@6.26.3 babel-loader@7.1.5 babel-preset-env@1.7.0 babel-plugin-transform-runtime@6.23.0 -D babel-core：Babel编译器的核心； babel-loader：用于webpack的一个loader，babel-core依赖.
JavaScript -- 详解Webpack + ES6 搭建环境和语法使用
百世经纶『一页書』
10-25 2351
Webpack+es6快速搭建环境，已经es6语法的使用
webpack 打包不支持 es6
yqbaa的博客
09-19 2308
npm install --save--dev babel-preset-stage-2 npm install babel-preset-es2015 --save-dev 编辑    .babel.rc  { "presets": [ "es2015" ] }
webpack打包js文件，兼容处理ES6、ES7等语法
Simple_499的博客
06-04 2333
推荐使用方法 ③ : 方法 ① ： (处理基本的js兼容,缺点:对于promise等无法处理) 所需的插件: babel-loader @babel/preset-env @babel/core /** * webpack配置文件 * webpack.config.js * */ const path = require('path') const htmlWebpackPlugin = require('html-webpack-plugin') module.exports = { /
webpack 3.10.0 配置心得（react和es6）
wulalala_lm的博客
04-27 1029
最近用飞冰的react物料做项目，从以前完全不懂mvvm，没用过es6，大概过了一周多，才对里面的物料慢慢上手，发现真的很好用，react打破原来的html方式，es6也是简化了很多js的写法。并且飞冰有特别棒的一点就是不用配环境，在使用物料的时候也是一键搞定，超级超级方便。好了，正题，我这一周配webpack的心路历程，（想自己动手从头开始配一次环境，结果过程非常非常非常。。。）首先webpac...
Webpack 1.x入门与配置教程
- 外部插件如Babel-loader（demo05）用于处理ES6语法，确保跨浏览器兼容。 - demo06演示如何打包静态资源，如CSS和图片，可能涉及到loader的配置。 - 后续的demo还涉及less处理、图片打包、HTML模板嵌入、多入口...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jiegiser#

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值