webpack打包不识别es6语法的坑
今天Vue项目npm run build 后webpack,报错uglifyjs,自己研究了一下,翻译过来,意思是不识别项目中写的高级语法,这里要把项目里es6语法转es5让浏览器识别,
也就是webpack的babel需要配置下
Babel其实是一个编译JavaScript的平台,它的强大之处表现在可以通过编译帮你达到以下目的:
- 使用下一代的JavaScript代码(ES6,ES7...),即使这些标准目前并未被当前的浏览器完全的支持;
- 使用基于JavaScript进行了拓展的语言,比如React的JSX;
1.先安装包
npm install babel-preset-es2015 2.配置webpack.base.conf.js
{
test: /\.js$/,
loader: 'babel-loader',
options:{
presets:["es2015"]
},
exclude:[/node_modules/]
},
3.OK,重新npm run build构建工程打包,好了
webpack打包不识别es6语法的坑的更多相关文章
- 关于安卓浏览器无法识别es6语法
这几天写代码,在highcharts的代码里用了一些es语法 在PC端及iphone上都能正常运行,在安卓上无法显示 一直不知道什么原因.后来一点点查看才发现是下面的两句es6代码 1: .map(i ...
- webpack打包es6代码
1.简单描述一下es6的模块导入和导出的语法: //导出:export var aa = 10;export function demo(){} //不能写成:var aa = 10;export a ...
- webpack打包编译时,不识别src目录以外的js或css
前端的dva项目开发时,遇到个很郁闷的问题,用es6的语法简单的export一个变量出来,在其他js中import使用,结果就报错了. export写法如下: const enUS = { acc ...
- Webpack打包方式及各场景下模块化语法总结
1.nodejs的方式:commonjs var xx =require() modules.exports=xxxx 注意:这种方式引入模块,路径会遵循node的规则,和js的src路径规则不 ...
- 使用express、react、webpack打包、socket.io、mongodb、ant.design、less、es6实现聊天室
拿到一个项目,我们应该如何去完成这个项目呢. 是直接上手? 还是先进行分析,然后再去解决呢?毫无疑问,如果直接上手解决,那么可能会因为知道目标所在,而导致出现各种问题. 所以,我们应该系统的分析这个项 ...
- Vue发布过程中遇到坑,以及webpack打包优化
前言 这段时间,本人自己做了一个vue画面部署到自己的服务器上,发现运行速度慢的的惊人,虽然服务器很渣(本人没什么钱,只能租最差的服务器,主要是给自己学习用的),但是这样开发出来的网站简直不能用,所以 ...
- 基于ES6模块标准通过webpack打包HTM5项目
本篇主要演示通过webpack打包phaser项目,webpack安装方法在此处就不一一赘述了 经常用phaser来写html5游戏的朋友可能会发现,当游戏场景比较多时,如果都写在一个js文件中那么将 ...
- webpack打包踩坑之TypeError: Cannot read property 'bindings' of null
file loader介绍:https://www.webpackjs.com/loaders/file-loader/ babel loader介绍:https://webpack.js.org/l ...
- webpack中使用babel处理es6语法
index.js const arr = [ new Promise(()=>{}), new Promise(()=>{}) ]; arr.map(item => { consol ...
随机推荐
- java I/O框架 (二)文件操作(File)
1.介绍 java io中最常操作的就是我们电脑中的文件,将这些文件以流的形式本地读写,或者上传到网络上.java中的File类就是对这些存储于磁盘上文件的虚拟映射,这也体现了java面向对象的思想, ...
- 【前端】Vue2全家桶案例《看漫画》之五、引入axios
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_5.html 项目github地址:https://github.com/shamoyuu/ ...
- 【前端】Angular2 Ionic2 学习记录
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/angular2_ionic2.html 一.建立项目 ionic start ProductName super ...
- 第2章 PCI总线的桥与配置
在PCI体系结构中,含有两类桥片,一个是HOST主桥,另一个是PCI桥.在每一个PCI设备中(包括PCI桥)都含有一个配置空间.这个配置空间由HOST主桥管理,而PCI桥可以转发来自HOST主桥的配置 ...
- Java获取当前的时间
Java获取当前的时间 1.利用Java中的Calendar获取当前的时间 具体实现如下: /** * @Title:NowTime.java * @Package:com.you.model * @ ...
- Excel 2010高级应用-饼图(四)
Excel 2010高级应用-饼图(四) 基本操作如下: 1.新建空白文档,并命名饼图 2.单击"插入",找到饼图样例图 3.选择其中一种饼图图例,单击并在空白文档上生成饼图图框 ...
- Error: Dynamic is undefined
1.错误描述 Error: Dynamic is undefined @http://localhost:8080/Query/resource/global/scripts/app.js:149:1 ...
- freemarker写select组件报错总结(四)
1.错误描述 <html> <head> <meta http-equiv="content-type" content="text/htm ...
- Linux查看网络的联机状态
Linux查看网络的联机状态 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ netstat -a^C unix 3 [ ] 流 已连接 14923 @/tmp ...
- dpkg: error: -i (--install) 和 -i (--install) 两个操作之间有矛盾
1 错误描述 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ sudo dpkg -i -i WineQQ2013-20131120-Longene.deb [ ...