详解webpack babel的配置

Babel是什么

Babel是一个编译JavaScript的平台,它的强大之处表现在可以通过编译帮你达到:

  1. 使用下一代的javascript(ES6,ES7,……)代码,即使当前浏览器没有完成支持;
  2. 使用基于JavvScript进行扩展语言,比如React的JSX;

npm i babel-core babel-preset-env babel-loader babel-plugin-transform-runtime babel-preset-stage-2 -D

关于babel的使用

首先 babel-preset-es2015 已经废弃,你可以使用 babel-preset-env 来代替它,后者比前者更好的更方便,这里不在赘述。

babel-polyfill VS babel-runtime VS babel-plugin-transform-runtime

  1. 首先 babel-polyfill 是对所有的API进行全局设置。并且会污染全局变量。
  2. babel-runtime 需要对你需要的API,如:Object.assign()。会先require()
  3. babel-plugin-transform-runtime 最推荐。它不需要require()也不会全局污染,并且,更厉害的是它是按需打包,全自动。

开始

/**** webpack.config.js ****/
// 在规则中增加
{
  test: /\.js$/,
  use: 'babel-loader',
  // 只处理src目录下面的。
  // 你也可以配置一条规则处理node_modules下面的。
  // 我记得swiper不知道哪一版本的直接把原来为编译的es6的语法塞给我,导致浏览器不兼容。
  include:[resolve('../src')]
}
/**** .babelrc ****/
// presets字段设定转码规则
{
 "presets": [
  ["env", {
   "modules": false,
   // 需要支持的环境,可选入: chrome, edge, 也可以node:6.5 ,node:current......
   "targets": {
    "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
   }
  }],
  "stage-2"
 ],
 // babel-transform-plugin转码预设不起作用的内容如:Object.assign()等等
 "plugins": ["transform-runtime"]
}

presets能够解决哪些语法。 package

babel-plugin-transform-runtime能够解决哪些语法。 package

其他。 更多 

最后:babel看上去好像要配置很多,其实经过官方的一顿简化之后需要的并没有那么繁琐。

github

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持JavaScript中文网。

原文链接:www.jb51.net

上一篇:webpack多入口文件页面打包配置详解
下一篇:Gulp实现静态网页模块化的方法详解

相关推荐

  • 🚀webpack 4 beta — try it today!🚀

    Now that webpack is a #0CJS (Zero Configuration) out-of-the-box bundler, we will lay groundwork in 4...

    3 年前
  • 🔥一步一步的带你走进Webpack4的世界

    前言 webpack是当下最热门的前端资源模块化管理和打包工具,它可以将许多松散的模块按照依赖和规则打包成符号生产环境部署的前端资源,还可以将按需加载的模块进行代码分割。

    7 个月前
  • (独家!)webpack 5 changelog 全文翻译

    ★ webpack 团队于北京时间 10 月 12 日凌晨发布了 v5.0.0-beta.0 版本,本文译自 webpack/changelog-v5。此部分主要面向非插件开发的 webpack 使...

    1 年前
  • 面试必备!webpack 中那些最易混淆的 5 个知识点

    前两天为了优化公司的代码打包项目,恶补了很多 webpack4 的知识。要是放在几年前让我学习 webpack 我肯定是拒绝的,之前看过 webpack 的旧文档,比我们内部项目的文档还要简陋。

    1 年前
  • 面试官:请手写一个webpack4.0配置

    确认过眼神,你还是没有准备秋招的人?时间仓促。自京东6月8号开启管培生的招聘,就意味着秋招的开始。然而你还在等着秋天的到来?今年形势应该更为严峻,随着各大技术(vue,webpack,react,微信...

    2 年前
  • 面向小白的 webpack 配置

    前几天面试,问到 webpack 的插件。虽然知道,但没有记住名字,在这里写个笔记,用来复习。 const path = require('path') module.exports = { ...

    1 个月前
  • 随着WebPACK定义全局变量

    随着WebPACK定义全局变量 ...

    3 年前
  • 配置webpack中externals来减少打包后vendor.js的体积

    在日常的项目开发中,我们会用到各种第三方库来提高效率,但随之带来的问题就是打包后的vendor.js体积过大,导致加载时空白页时间过长,给用户的体验太差。为此我们需要减少vendor.js的体积,从本...

    2 年前
  • 配置webpack中dev.env.js、prod.env.js,解决不同命令下项目启动和打包到指定的环境

    前后端分离的项目开发中,我们有开发环境、测试环境、预生产环境和生产环境。 1、开发环境下调试接口的时候,一般都会有好几个接口地址(开发服务器上的,本地的,接口开发人员的,七七八八的接口地址),要根据...

    2 年前
  • 配置WebPACK允许浏览器调试

    Jim提出了一个问题:Configure webpack to allow browser debugging,或许与您遇到的问题类似。 回答者dreyescat给出了该问题的处理方式: You ca...

    3 年前

官方社区

扫码加入 JavaScript 社区