详解webpack运行Babel教程

2024-07-29 08:34:04

摘要:Babel是转码器，webpack是打包工具，它们应该如何一起使用呢?

GitHub仓库： Fundebug/webpack-babel-tutorial

ES6 + IE10 = 语法错误!

setTimeout(() =>
{
  console.log("Hello, Fundebug!");
}, 100)

由于低版本的浏览器没有支持ES6语法，这就意味着代码会出错。例如，在IE 10浏览器中，会出现”语法错误”：

如果你使用了Fundebug错误监控服务，则会收到这样的报错：

直接使用babel转码

当你使用更高版本的JavaScript语法时，比如ES7，低版本的浏览器将无法运行。为了兼容低版本的浏览器，比如万恶的IE，我们不得不使用Babel，将ES6、ES7等高版本代码转换为ES5代码。

安装 babel-cli

sudo npm install --global babel-cli

使用babel命令转码

babel test.js --out-file compiled.js

转码之后生成的代码为compiled.js：

setTimeout(function () {
  console.log("Hello, Fundebug!");
}, 100);

可知，箭头函数转换成了function，这样就代码可以在IE 10等不支持ES6的浏览器上正确执行了。

广告：欢迎免费试用Fundebug，助您第一时间发现代码BUG。

使用webpack运行Babel

一般项目中都会使用 webpack对代码进行打包，比如，将多个js文件打包成1个js文件，这样可以减少前端的资源请求。因此，我们需要将Babel也集成到webpack中。

安装webpack

npm install --global webpack

我使用的webpack版本为4.10.0

webpack --version
4.10.0

安装babel

npm install --save-dev babel-cli babel-preset-env

babel-preset-env是Babel新版的preset，它可以让我们灵活地设置代码目标执行环境，比如只支持各个浏览器最新的2个版本，支持IE8及其以上的IE浏览器。

安装babel-loader

npm install --save-dev babel-loader

babel-loader 是webpack的babel插件，它让我们可以在wepback中运行Babel。

配置babel

新增 .babelrc文件：

{
  "presets": ["env"]
}

配置webpack

新增 webpack.config.js文件：

module.exports = {
  entry: './test.js',
  output:
  {
    path: __dirname,
    filename: 'bundle.js'
  },
  module:
  {
    rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    }]
  }
};

可知，我们在webpack中使用了babel-loader插件来运行Babel，转换所有的.js代码(除了node_modules中的代码)。

使用webpack运行babel

webpack --mode production

转换之后的代码为bundle.js。bundle.js只有1行代码，这是因为为我们指定的mode为production，webpack为了压缩代码只生成了1行代码。

参考

webpack 配合babel 将es6转成es5 超简单实例

Babel入门教程

babel-preset-env: a preset that configures Babel for you

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

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+React开发环境的搭建的方法步骤

1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具,能够把各种文件(例如:ReactJS.Babel.Coffeescript.Less/Sass等)作为模块进行编译后进行打包. 2.安装Webpack 要开始使用Webpack在项目中进行开发前我们首先需要在全局环境中进行安装. npm install webpack -g 3.创建一个项目安装好后创建一个名叫learn-webpack的项目并进入该项目文件夹,当然项目名字你可以起你自己想要的
详解webpack2+node+react+babel实现热加载(hmr)

前端工程化开发的一个重要标志就是热替换技术,它大大的提高开发效率,使我们专注于写代码,webpack2中的热替换相比较1更加简洁. 1. 先看效果 2.目录结构 3.项目目录结构文件描述 bin 执行文件 node_modules node包 public 静态资源文件 static 静态资源 dist 编译后文件 src 项目js文件 .bablrc babel配置文件 webpack.config.dev.js开发模式webpack配置 webpack.config.pro.js生产模式we
详解webpack babel的配置

Babel是什么 Babel是一个编译JavaScript的平台,它的强大之处表现在可以通过编译帮你达到: 使用下一代的javascript(ES6,ES7,--)代码,即使当前浏览器没有完成支持: 使用基于JavvScript进行扩展语言,比如React的JSX: npm i babel-core babel-preset-env babel-loader babel-plugin-transform-runtime babel-preset-stage-2 -D 关于babel的使用首先
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等工具了感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
Webpack 之 babel-loader文件预处理器详解

loader官方解释是文件预处理器,通俗点说就是webpack在处理静态文件的时候,需要使用 loader 来加载各种文件,比如: html文件需要使用html-loader ,css 需要使用css-loader . style-loader 等等. 今天我们来认识的是 babel-loader,用来处理ES6语法,将其编译为浏览器可以执行的js语法. 安装我们需要用到 babel-loader babel-core babel-preset 配合版本: webpack 3.x | babe
详解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,保
详解webpack运行Babel教程

摘要:Babel是转码器,webpack是打包工具,它们应该如何一起使用呢? GitHub仓库: Fundebug/webpack-babel-tutorial ES6 + IE10 = 语法错误! test.js使用了ES6的箭头函数 : setTimeout(() => { console.log("Hello, Fundebug!"); }, 100) 由于低版本的浏览器没有支持ES6语法,这就意味着代码会出错.例如,在IE 10浏览器中,会出现"语法错误&qu
详解如何用babel转换es6的class语法

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

每次学新东西总感觉自己是不是变笨了,看了几个博客,试着试着就跑不下去,无奈只有去看官方文档. webpack是基于node的.先安装最新的node. 1.初始化安装node后,新建一个目录,比如html5.cmd中切到当前文件夹. npm init -y 这个命令会创建一个默认的package.json.它包含了项目的一些配置参数,通过它可以进行初始安装.详细参数:https://docs.npmjs.com/files/package.json. 不要y参数的话,会在命令框中设置各项参数,但
详解webpack 打包文件体积过大解决方案（code splitting）

优化对比 : 未优化前:index.html引入一个main.js文件,体积2M以上. 优化后入:index.html引入main.js.commons.js.charts.js.other.js.以达到将main.js平分目的.每个文件控制300k以内.(如果高兴100k也没问题) 用到的一堆库及工具: vue.webpack.babel.highcharts.echarts.jquery.html2canvas******此去省略若干m代码问题: 开发环境用webpack后发现单个js文件
详解webpack模块化管理和打包工具

本篇文章主要介绍了详解webpack模块化管理和打包工具,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 Webpack简介 webpack是当下最热门的前端资源模块化管理和打包工具. 它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载.通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块. AMD 模块. ES6 模块.CSS.图片. JSON.
详解webpack的文件监听实现(热更新)

前言文件监听是在源码发生变化时,自动重新构建出新的输出文件. webpack 开启监听模式,有两种方式: 1.启动 webpack 命令时,带上 --watch 参数. 唯一缺点:需要手动刷新才能看到变化: 2.在配置 webpack.config.js 中设置 watch: true. 优点: (1) WDS 不刷新浏览器 (2) WDS 不输出文件,⽽是放在内存中 (3) 使⽤用 HotModuleReplacementPlugin 插件 1 第一种方式, --watch 1.1 配置
详解Dev C++使用教程(使用Dev C++编写C语言程序)

前面我们给出了一段完整的C语言代码,就是在显示器上输出"C语言中文网",如下所示: #include <stdio.h> int main() { puts("C语言中文网"); return 0; } 本节我们就来看看如何通过 Dev C++ 来运行这段代码. Dev C++ 支持单个源文件的编译,如果你的程序只有一个源文件(初学者基本都是在单个源文件下编写代码),那么不用创建项目,直接运行就可以:如果有多个源文件,才需要创建项目. 1) 新建源文件
详解webpack之scss和postcss-loader的配置

本文介绍了详解webpack之scss和postcss-loader的配置,分享给大家,具体如下: 开始 npm i sass-loader node-sass postcss-loader autoprefixer 首先配置postcss-loader 在这里postcss是为了来给浏览器内核添加私有前缀.当前postcss还有其他操作比如px2rem之类的.可以把postcss想象成babel-core只是一个控制中心,主要的还是它分散出来的插件. /**** package.json **

详解webpack运行Babel教程

相关推荐

随机推荐