[转] webpack中配置Babel
一、安装
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的更多相关文章
- webpack中配置Babel
Babel是一个javascript编译器,可以将ES6和更新的js语法转换成ES5的,使代码在较老的浏览器里也能正常运行. 一.安装 npm install --save-dev babel-loa ...
- webpack中配置babel时遇到的问题
1.Error: Cannot find module '@babel/core' babel-loader@8 requires Babel 7.x (the package '@babel/cor ...
- 在webpack中配置vue.js
在webpack中配置vue.js 这里有两种在webpack中配置vue.js的方法,如下: 1.在main.js中引入vue的包: index.html: <!DOCTYPE html> ...
- webpack中配置eslint
首先安装eslint npm install eslint --save-dev 安装好这个工具后,初始化eslint npx eslint --init 这个时候会自动生成.eslintrc.js ...
- webpack中使用babel处理es6语法
index.js const arr = [ new Promise(()=>{}), new Promise(()=>{}) ]; arr.map(item => { consol ...
- 前端工程化之webpack中配置babel-loader(四)
安装 安装:npm i -D babel-core babel-loader babel-plugin-transform-runtime 安装:npm i -D babel-preset-es201 ...
- webpack中使用babel
step one: https://babeljs.io/setup Choose your tool (try CLI) select webpack Step two: npm install - ...
- (4)webpack中配置css,scss,less第三方loader
为什么要使用第三方loader 一般引入样式文件,我们会在html中引入样式标签. 很明显,这样就跟之前在script中引入js文件一样,会导致二次请求.我们希望webpack像处理js文件一样处理样 ...
- 在webpack中配置.vue组件页面的解析
1. 运行`cnpm i vue -S`将vue安装为运行依赖: 2. 运行`cnpm i vue-loader vue-template-compiler -D`将解析转换vue的包安装为开发依赖: ...
随机推荐
- [PRIMITIVE TECHNOLOGY]澳洲小哥的黑皮豆/black been/摩顿湾板栗(栗子)/Moreton Bay Chestnut
wiki:https://en.wikipedia.org/wiki/Castanospermum inner:http://blog.sciencenet.cn/blog-309517-770951 ...
- 自定义select标签箭头样式
select::-ms-expand{ display: none; }//ie样式清除 select{ appearance:none; -moz-appearance:none; -webkit- ...
- CF 1145 (愚人节比赛)
D题 题目就是让你找出题面中拼错的单词,拼错的字母组合成一句话就是正确的题面. two plus xor of third and min elements #include<bits/stdc ...
- 怎么解决docker pull拉取镜像速度过慢的问题
在我们安装了docker之后,在利用docker pull下载镜像的时候,由于国内的源会出现的问题就是速度真的很慢,可以用龟速来形容,最痛苦的是当你耐心的等待几个小时之后,出现unexpected E ...
- ACM-ICPC 2018 沈阳赛区网络预赛 G Spare Tire(容斥)
https://nanti.jisuanke.com/t/31448 题意 已知a序列,给你一个n和m求小于n与m互质的数作为a序列的下标的和 分析 打表发现ai=i*(i+1). 易得前n项和为 S ...
- 微信退款时候报”请求被中止: 未能创建 SSL/TLS 安全通道“或”The request was aborted: Could not create SSL/TLS secure channel“的错误
如题,英文中文表述的是一个意思 退款测试在我本机测试一切都是正常的,但是发布到了服务器就报这样的一个错啦 但是无论百度或者google或者bing,你能够搜索到的结果都很类似,综合起来就是加这样一些代 ...
- 【6】学习C++之类的实例化及访问
类就像一张图纸,如果不去实例化,制造出相应的零件,用处就不会那么大. 实例化类有两种,一个是从栈中实例化对象: class TV { public: ]; int type; void changeV ...
- ueditor复制文本有多余的空行问题
今天从ueditor中复制文本,粘贴到记事本中发现每一行后面都多了一个空行. Ueditor中的文本如图: 本来只有三行,全选复制所有内容,再粘贴到记事本中发现有每一行文本后面都有多余的空行: 如果我 ...
- Quartz.NET 入门(转)
概述 Quartz.NET是一个开源的作业调度框架,非常适合在平时的工作中,定时轮询数据库同步,定时邮件通知,定时处理数据等. Quartz.NET允许开发人员根据时间间隔(或天)来调度作业.它实现了 ...
- day13 Python数据基本类型
算数运算 / x除以y // 取整除 %返回除法的余数 != 不等于 <> 不等于 赋值运算 c+= a等价于c=c+a c-= a等价于c=c-a 逻辑运算 and or not 基 ...