一、安装

npm install --save-dev babel-loader babel-core babel-preset-env

二、在webpack.config.js中配置module

1
2
3
4
5
6
7
8
9
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel-loader'
    }
  ]
}

三、新建.babelrc配置文件

  如下是vue-cli自动生成的babel配置。如果要配置plugins,需要npm install对应插件和依赖。

1
2
3
4
5
6
7
8
9
10
11
12
{
  "presets": [
    ["env", {
      "modules"false,
      "targets": {
        "browsers": ["> 1%""last 2 versions""not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx""transform-runtime"]
}

四、polyfill:完整模拟ES2015+ 

  Babel默认只转换新的JavaScript句法,而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。如果想让这些方法运行,就需要使用babel-polyfill,为当前环境提供一个垫片。

npm install --save babel-polyfill

1
2
3
4
5
6
7
// 方法一:在webpack中引用
module.exports = {
  entry: ["babel-polyfill""./app/js"]
};
 
// 方法二:在js入口顶部引入
import "babel-polyfill";

[转] webpack中配置Babel的更多相关文章

  1. webpack中配置Babel

    Babel是一个javascript编译器,可以将ES6和更新的js语法转换成ES5的,使代码在较老的浏览器里也能正常运行. 一.安装 npm install --save-dev babel-loa ...

  2. webpack中配置babel时遇到的问题

    1.Error: Cannot find module '@babel/core' babel-loader@8 requires Babel 7.x (the package '@babel/cor ...

  3. 在webpack中配置vue.js

    在webpack中配置vue.js 这里有两种在webpack中配置vue.js的方法,如下: 1.在main.js中引入vue的包: index.html: <!DOCTYPE html> ...

  4. webpack中配置eslint

    首先安装eslint npm install eslint --save-dev 安装好这个工具后,初始化eslint npx eslint --init 这个时候会自动生成.eslintrc.js ...

  5. webpack中使用babel处理es6语法

    index.js const arr = [ new Promise(()=>{}), new Promise(()=>{}) ]; arr.map(item => { consol ...

  6. 前端工程化之webpack中配置babel-loader(四)

    安装 安装:npm i -D babel-core babel-loader babel-plugin-transform-runtime 安装:npm i -D babel-preset-es201 ...

  7. webpack中使用babel

    step one: https://babeljs.io/setup Choose your tool (try CLI) select webpack Step two: npm install - ...

  8. (4)webpack中配置css,scss,less第三方loader

    为什么要使用第三方loader 一般引入样式文件,我们会在html中引入样式标签. 很明显,这样就跟之前在script中引入js文件一样,会导致二次请求.我们希望webpack像处理js文件一样处理样 ...

  9. 在webpack中配置.vue组件页面的解析

    1. 运行`cnpm i vue -S`将vue安装为运行依赖: 2. 运行`cnpm i vue-loader vue-template-compiler -D`将解析转换vue的包安装为开发依赖: ...

随机推荐

  1. [PRIMITIVE TECHNOLOGY]澳洲小哥的黑皮豆/black been/摩顿湾板栗(栗子)/Moreton Bay Chestnut

    wiki:https://en.wikipedia.org/wiki/Castanospermum inner:http://blog.sciencenet.cn/blog-309517-770951 ...

  2. 自定义select标签箭头样式

    select::-ms-expand{ display: none; }//ie样式清除 select{ appearance:none; -moz-appearance:none; -webkit- ...

  3. CF 1145 (愚人节比赛)

    D题 题目就是让你找出题面中拼错的单词,拼错的字母组合成一句话就是正确的题面. two plus xor of third and min elements #include<bits/stdc ...

  4. 怎么解决docker pull拉取镜像速度过慢的问题

    在我们安装了docker之后,在利用docker pull下载镜像的时候,由于国内的源会出现的问题就是速度真的很慢,可以用龟速来形容,最痛苦的是当你耐心的等待几个小时之后,出现unexpected E ...

  5. ACM-ICPC 2018 沈阳赛区网络预赛 G Spare Tire(容斥)

    https://nanti.jisuanke.com/t/31448 题意 已知a序列,给你一个n和m求小于n与m互质的数作为a序列的下标的和 分析 打表发现ai=i*(i+1). 易得前n项和为 S ...

  6. 微信退款时候报”请求被中止: 未能创建 SSL/TLS 安全通道“或”The request was aborted: Could not create SSL/TLS secure channel“的错误

    如题,英文中文表述的是一个意思 退款测试在我本机测试一切都是正常的,但是发布到了服务器就报这样的一个错啦 但是无论百度或者google或者bing,你能够搜索到的结果都很类似,综合起来就是加这样一些代 ...

  7. 【6】学习C++之类的实例化及访问

    类就像一张图纸,如果不去实例化,制造出相应的零件,用处就不会那么大. 实例化类有两种,一个是从栈中实例化对象: class TV { public: ]; int type; void changeV ...

  8. ueditor复制文本有多余的空行问题

    今天从ueditor中复制文本,粘贴到记事本中发现每一行后面都多了一个空行. Ueditor中的文本如图: 本来只有三行,全选复制所有内容,再粘贴到记事本中发现有每一行文本后面都有多余的空行: 如果我 ...

  9. Quartz.NET 入门(转)

    概述 Quartz.NET是一个开源的作业调度框架,非常适合在平时的工作中,定时轮询数据库同步,定时邮件通知,定时处理数据等. Quartz.NET允许开发人员根据时间间隔(或天)来调度作业.它实现了 ...

  10. day13 Python数据基本类型

    算数运算 / x除以y // 取整除 %返回除法的余数 !=   不等于 <> 不等于 赋值运算 c+= a等价于c=c+a c-= a等价于c=c-a 逻辑运算 and or not 基 ...