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 集合框架(一)概述
一.概述 Java Collection Framework (JCF) 提供给我们一系列的类和接口,方便开发者处理集合对象. 在Java 2之前,Java是没有完整的集合框架的.它只有一些简单的可以 ...
- windows下常用工具
下面是平时自用的一些软件,感觉挺好用的,推荐给大家咯. everything 搜索神器 faststone capture 红绿小工具,工具小功能强 clcl 复制粘贴神器 f.lux linux和w ...
- HighCharts之2D面积图
HighCharts之2D面积图 1.HighCharts之2D面积图源码 <!DOCTYPE html> <html> <head> <meta char ...
- jquery自带的方法
5.1,$.trim $.trim(" Hello, chinaren_1123 & 摆渡浮桥! "); //去掉前后空格后->Hello, chinaren ...
- 从“跳一跳”来看微信小程序的未来
从“跳一跳”来看微信小程序的未来 相信大家这两天都被微信新推出的小程序跳一跳刷爆了朋友圈,为了方便用户在使用过程中切换小程序,微信在这次6.6.1版本中加入了下拉可快速切换小程序的功能,而“跳一跳 ...
- string的常见用法
使用前提:需要头文件! #include<string> using namespace std; 1.string类型是可以下标访问的,也可以通过迭代器访问 string::iterat ...
- 第三篇:数据可视化 - ggplot2
前言 R语言的强大之处在于统计和作图.其中统计部分的内容很多很强大,因此会在以后的实例中逐步介绍:而作图部分的套路相对来说是比较固定的,现在可以先对它做一个总体的认识. 在上一篇文章中,介绍了使用gr ...
- js判定是否为chrome,区分搜狗+360
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【POJ1743】Musical Theme(后缀数组)
[POJ1743]Musical Theme(后缀数组) 题面 洛谷,这题是弱化版的,\(O(n^2)dp\)能过 hihoCoder 有一点点区别 POJ 多组数据 题解 要求的是最长不可重叠重复子 ...
- NOIP2010题解
所有题目链接均来自洛谷 T1机器翻译 原题戳这里 自古T1是水题 因为每一个数字都小于1000,所以对于是否在队列中可以开数组查询 对于大小的限制,弄一个队列维护大小即可(水题呀...) 这题在Win ...