Webpack4 使用Babel处理ES6语法的方法示例

2024-10-01 03:19:18

修改 index.js 内容，写一些 ES6 的语法：

const arr = [
  new Promise(() => {}),
  new Promise(() => {})
];

arr.map(item => {
  console.log(item);
})

ES6 很强大，但目前并不是所有的浏览器都支持，所以需要用到 Babel，让旧的浏览器或环境中将 ES6 代码转换为向后兼容版本的 JavaScript 代码。

来试一下吧，先安装需要用的 Babel 包：

npm install babel-loader @babel/core -D

配置 webpack.config.js，增加一条 rulues ：

 module: {
  rules: [{
   test: /\.js$/,
   exclude: /node_modules/, // 排除该目录下的所有代码
   loader: "babel-loader"
  }]
 }

babel-loader 告诉了 webpack 怎么处理 ES6 代码，但它并不会将ES6 代码翻译成向后兼容版本的代码，如果想要执行这一步，还需要安装一个模块 preset-env，它包含了所有 ES6 代码转换的规则:

npm install @babel/preset-env -D

安装完之后配置一下：

rules: [{
 test: /\.js$/,
 exclude: /node_modules/, // 排除该目录下的所有代码
 loader: 'babel-loader',
 options:{
  'presets': ['@babel/preset-env']
 }
}]

这样，运行打包命令，就可以把 ES6 语法翻译成 ES5了，看一下打包的结果：

没问题，语法已经翻译成了当前所有浏览器能识别的语法，但是做到了这一点还是不够，因为那些比较新的对象和函数，比如这里的 Promise 和 map，在低版本的浏览器里实际还是不存在的。所以这时不仅要进行语法的转换，还要想办法把这些新的特性，补充到低版本的浏览器里。怎么做呢？ babel 提供了一个工具叫 polyfill，安装：

npm install @babel/polyfill -D

然后在 index.js 的最顶部，引入这个包：

import '@babel/polyfill'

保存代码，再次进行打包查看结果，可以发现打包后的 main.js 里面，有了很多代码来帮助实现比如 Promise 和 map 这些新特性。看一下 main.js 文件的大小：

859KB，再看一下没有使用 polyfill 之前的 main.js 大小：

只有4.36KB，使用 polyfill 之后文件变大了很多，这说明了 polyfill 使用了非常多的代码来填入新特性。
但是，index.js 里只使用了 Promise 和 map，其它的新特性都没用，能不能把那些没用到的实现方法都剔除了呢？可以，给 preset-env 增加一个 useBuiltIns 配置：

rules: [{
 test: /\.js$/,
 exclude: /node_modules/, // 排除该目录下的所有代码
 loader: 'babel-loader',
 options: {
  'presets': [
   ['@babel/preset-env', {
    useBuiltIns: 'usage'
   }]
  ]
 }
}]

useBuiltIns: 'usage' 的意思就是说，当使用 polyfill 往低版本浏览器填入一些不存在的特性时，不是全部都填入，而是根据业务代码使用到的特性去选择填入，比如这里使用了 Promise 和 map，那就只填入这两个，其它的都不用。再次打包查看结果：

可以看到，main.js 的大小只有 138KB了。

这里还可以配置一些其它的参数，比如 targets 参数：

rules: [{
 test: /\.js$/,
 exclude: /node_modules/, // 排除该目录下的所有代码
 loader: 'babel-loader',
 options: {
  'presets': [
   ['@babel/preset-env', {
    useBuiltIns: 'usage',
    targets:{
     edge: '17', // edge高于17的版本
     firefox: '60', // firefox 高于60的版本
     chrome: '67' // chrome高于67的版本
    }
   }]
  ]
 }
}]

targets 是指打包会运行在什么样的浏览器，这有三个浏览器，并注明了最低版本。在打包的过程中，babel 会去看这些浏览器对 ES6 代码的支持情况，是否有必要进行语法转换、填入一些新特性。运行打包命令查看结果：

发现还是输出的 Promise 和 map，并没有进行新特性的填入，说明这三个版本的浏览器对 ES6 的支持已经很好了，不需要在进行额外的处理，main.js 的大小是变成了最初的4.36KB。

到此为止，webpack 对 ES6 的简单处理就完成了。

关于 babel 还有很多东西和配置项，更多的知识要到 https://babel.docschina.org来学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

ES6通过babel转码使用webpack使用import关键字

使用了babel转码,使用import和export的时候,在浏览器运行代码的时候,提示 Uncaught ReferenceError: require is not defined babel只是个翻译,假设a.js 里 import 了 b.js 对a.js进行转码,只是翻译了a.js,并不会把b.js的内容给读取合并进来如果想在最终的某一个js里,包含 a.js,b.js 的代码,那就需要用到打包工具也就是webpack等工具了感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
webpack4与babel配合使es6代码可运行于低版本浏览器的方法

使用es6+新语法编写代码,可是不能运行于低版本浏览器,需要将语法转换成es5的.那就借助babel转换,再加上webpack打包,实现代码的转换. 转换包括两部分:语法和API let.const这些是新语法. new promise()等这些是新API. 简单代码类库 utils.js const name = 'weiqinl' let year = new Date().getFullYear() export { name, year } index.js import _ from
webpack使用 babel-loader 转换 ES6代码示例

本文介绍了webpack使用 babel-loader 转换 ES6代码示例,分享给大家,具体如下: 查询各个 loader的使用,可以在官网上查询.https://www.npmjs.com (一)安装 babel-loader,babel-core. 使用命令 npm install --save-dev babel-loader babel-core 因为ES6语法每年都在更新,因此,我们需要一定的规则去转换. npm install --save-dev babel-preset-lat
详解webpack 配合babel 将es6转成es5 超简单实例

今天接触了webpack,第一次使用webpack进行转码,竟然稀里糊涂就成功了,哈哈. 下面附上流程创建个文件夹,初始化一下,首先全局安装webpack npm install webpack --save-dev 然后安装babel npm install --save-dev babel-core babel-preset-es2015 npm install --save-dev babel-loader 在当前文件夹内执行安装,然后创建两个文件夹一个src作为源文件夹,一个bin,保
Webpack4 使用Babel处理ES6语法的方法示例

修改 index.js 内容,写一些 ES6 的语法: const arr = [ new Promise(() => {}), new Promise(() => {}) ]; arr.map(item => { console.log(item); }) ES6 很强大,但目前并不是所有的浏览器都支持,所以需要用到 Babel,让旧的浏览器或环境中将 ES6 代码转换为向后兼容版本的 JavaScript 代码. 来试一下吧,先安装需要用的 Babel 包: npm install
使用webpack4编译并压缩ES6代码的方法示例

前段时间第一次接触了layabox游戏引擎做了一个项目,由于ES6相当好用,所以在项目中使用了很多的ES6语法,但是在发布的时候发现该引擎无法压缩ES6的代码,而不进行压缩的话则代码体积比较大然后其实该引擎会将自己写的代码打包在一个js文件中,所以也就只有一个js文件是没有压缩的,所以我就想到了自己使用webpack单独对这个文件进行压缩,并将ES6语法编译成ES5,做低版本浏览器的兼容. 第一步安装webpack 1) 全局安装webpack4 npm install webpack -g
如何给MySQL添加自定义语法的方法示例

目录 1 背景 2 新增关键词(token) 3 新增语法 4 类似于PT_partition添加对应的数据结构global_partition_clause 1 背景 MySQL语法解析器用的bison(即yacc)来实现的,而词法解析是自己来实现的,涉及到的token都在文件lex.h里面,然后通过Lex_input_stream 里面相关的函数,解析client的sql字节流(其中会通过提前构造好的hash表帮助快速找到对应symbol,相关代码在sql_lex_hash.cc里面),转换
利用babel将es6语法转es5的简单示例

前言 Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行. 这意味着,你可以现在就用ES6编写程序,而不用担心现有环境是否支持. 本文讲解需预装node和npm.大家可以参考这篇文章:http://www.jb51.net/article/90518.htm,这里介绍的非常详细. 文件目录结构生成包管理配置文件package.json npm init -y 安装转换工具 npm i -g babel-cli npm i --save-dev babel-pr
详解如何用babel转换es6的class语法

babel是一个转码器,目前开发react.vue项目都要使用到它.它可以把es6+的语法转换为es5,也可以转换JSX等语法. 我们在项目中都是通过配置插件和预设(多个插件的集合)来转换特定代码,例如env.stage-0等. 实际上babel可以通过自定义插件的方式实现任何代码的转换,接下来我们通过一个"把es6的 class 转换为es5"的例子来了解一下babel. 内容如下: webpack环境配置大家应该都配置过babel-core这个loader,它的作用是提供babe
详解如何使用babel进行es6文件的编译

1.babel babel官方网址 2. 安装 npm i babel-cli -g 通过上面命令进行babel的安装,其中i表示安装install的意思, -g表示安装到全局 3.使用创建文件es6.js let num = [1,2,3,4]; let plusDouble = num.map(item => item * 2); console.log(plusDouble); 然后使用命令进行编译: babel es6.js -o compiled.js 然后就会在当前目录下出现编译之
WebStorm ES6 语法支持设置&babel使用及自动编译(详解)

一.语法支持设置 Preferences > Languages & Frameworks > JavaScript 二.Babel安装 1.全局安装 npm install -g babel-cli 2.当前项目,适用于使用不同babel版本的情况 npm install --save-dev babel-cli 三.Babel基本用法 # 转码结果输出到标准输出 babel example.js # 转码结果写入一个文件 # --out-file 或 -o 参数指定输出文件 bab
webstorm和.vue中es6语法报错的解决方法

1.webstorm中es6语法报错,解决方法: 打开 Settings => Languages & Frameworks => Javascript 把 Javascript Language version 改为 ECMAScript 6 这样做所有的.js文件中es6不再报错,但是.vue文件中es6语法依然报错. 2. .vue文件中es6语法报错 (1)打开 Settings => File Types 找到 HTML 添加 *.vue 这样vue文件就相当于html
详解ES6语法之可迭代协议和迭代器协议

ECMAScript 2015的几个补充,并不是新的内置或语法,而是协议.这些协议可以被任何遵循某些约定的对象来实现. 有两个协议:可迭代协议和迭代器协议. 可迭代协议可迭代协议允许 JavaScript 对象去定义或定制它们的迭代行为, 例如(定义)在一个 for..of 结构中什么值可以被循环(得到).一些内置类型都是内置的可迭代对象并且有默认的迭代行为, 比如 Array or Map, 另一些类型则不是 (比如Object) . Iterator 接口的目的,就是为所有数据结构,提供了

Webpack4 使用Babel处理ES6语法的方法示例

相关推荐

随机推荐