es6编译打包后报错

㈠ 在给vue打包的时候 npm run dev 运行项目 调试 后 弹不出来浏览器出现报错

这明显是 babel没有起作用，还在es6的语法在浏览器当中运行。
看看你的webpack配置有没有问题， 记得要在 mole下面加上
{
test: /\.js$/,
loader: 'babel',
exclude: /node_moles/
},

㈡ 移动端使用es6语法需要编译吗

然而, Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。而且像import和export这两个命令现在在任何浏览器中都是不支持的, 同时babel也无法将其转换为浏览器支持的ES5, 原因在于:
babel只是个翻译，假设a.js 里 import 了 b.js, 对a.js进行转码，只是翻译了a.js，并不会把b.js的内容给读取合并进来, 如果想在最终的某一个js里，包含 a.js，b.js 的代码，那就需要用到打包工具
所以我在这里讲解一下如何使用webpack工具将带有import和export语法的JS文件, 通过打包工具生成所有浏览器都支持的单个JS文件.
1. 下载node.js和webpack
Node.js是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。可以说就是服务器端的JS. webpack是一个打包工具, 而它是依赖于node.js运行的.
下载node.js可以通过官网:
具体的安装步骤网上可以搜到很多, 这里不再赘述. 安装完毕后打开node.js自带的命令行工具
这里写图片描述
然后输入如下命令全局安装webpack工具
npm install -g webpack
接着通过命令行工具定位到你的工程文件的根目录下, 再次安装webpack到你的工程中
npm install webpack
2. 编写webpack.config.js文件
在根目录下创建webpack.config.js, 这个文件是用来描述一些要使用webpack工具进行打包的配置信息, 文件内容如下:
这里写图片描述
通过该文件可以使用webpack打包工具, webpack会从import.js进入, 对该文件中的内容进行编译并打包, 最终会在dist目录下生成打包好的文件bundle.js, 编译打包过程中用到的工具在mole对象的loaders中声明, 这里使用了babel-loader来对JS文件进行编译(包括从ES6转换为ES5以及打包)
3. 创建import.js
创建一个import.js, 内容如下:
这里写图片描述
在该文件中通过ES6语法import从export.js中引入firstName和lastName变量. 并且通过console.log将引入的两个变量打印到控制台.
4. 创建export.js
这里写图片描述
在该文件中通过ES6语法export将文件中的几个变量作为模块输出给别的文件引用.
5. 创建HTML文件
在HTML文件中直接将webpack最终打包生成的bundle.js文件引入即可, 因为通过webpack工具已经将export.js和import.js的所有内容都打包到一个文件bundle.js中了, 因此在HTML文件中引入该文件即可以将两个JS文件中的代码都执行.
这里写图片描述
6. 配置.babelrc文件
在工程文件的根目录下创建一个.babelrc文件(注意前面有个点), 这个文件是用来描述我要根据什么样的规则、或者是将JS文件编译成什么版本的文件(比如说ES5). 该文件的内容如下:
这里写图片描述
7. 下载相关依赖模块
方式1: 可以像下面这样, 直接在项目根目录下创建一个package.json文件, 并且在文件中指定devDependencies对象, 在该对象中写上我编译及打包中所要使用到的依赖模块, 图片中的webpack就是用于打包的工具, 而其他的以babel开头的选项都是编译JS文件并打包所需要用到的依赖模块.
这里写图片描述
创建好package.json文件后, 在命令行中输入
npm install
npm工具就会根据该文件中devDependencies选项下载对应的依赖模块.
方式2(推荐): Ctrl+R打开运行, 然后输入cmd打开命令行工具, 通过命令行工具一个个安装, 这样可以直接通过npm去下载依赖模块最新的稳定的版本, 同时也不需要自己去记这些模块的版本号
npm install babelnpm install babel-clinpm install babel-corenpm install babel-loadernpm install babel-preset-es2015
8. 使用 webpack打包
使用命令行工具定位到项目的根目录下, 然后输入如下指令
webpack
等待一会儿就会发现工程文件的目录下多了一个dist文件夹, 里面放着的就是打包好了的bundle.js文件, 在HTML文件中通过下面的代码引入js文件

然后在浏览器上运行html文件, 使用F12打开开发者工具, 就可以看到console选项中输出两行记录”Micheal”, “Jackson”

㈢ webpack打包react项目babel-loader转换es6语法中‘...’错误

三个点只能在最后，不能在第一位出现的吧

㈣ web前端打包报错 webpack 打包成功但是会报错 怎么解决

你应该把报错贴出来，这样才知道是什么问题。
我之前遇到过和你一样的问题，报了一堆错，但是打包完成，那时候是ES6转ES5没成功，那个js文件没有用babel。还有一次是npm该升级了，不知知道你这个是什么问题

㈤ vue项目打包,npm run build时报错,怎么把ES6转为ES5试了好几种方法都没成功,请问有详细的步骤操作吗

1、ES6转换ES5，使用babel-loader包

2、看到截图问题，估计是sass编译出错吧，导致文件压缩报错
最好附上debug.log日志，就看截图，不好定位错误问题

㈥ 白鹭发布ES6时uglify-js不支持es6的解决方案

试了一下发布ES6，结果报错，不支持uglify-js，需要换插件。从论坛中找到如下链接：

https://bbs.egret.com/forum.php? ... 52516&highlight=es6

但是看了一下发现并不是很合适，因为Egret中有不少地方用到了uglify-js，换起来有点麻烦。

这里我直接使用uglify-js的harmony分支uglify-es，源在github上：

https://github.com/mishoo/UglifyJS2/tree/harmony

按以下步骤操作：

1.按上面链接的文档进行安装，我直接npm安装的，没有替换Egret集成的uglify-js

2.安装完后找到Egret库中的utils.js，我的Mac目录在：/Users/xxxxxx/Library/Application Support/Egret/engine/5.2.14/tools/lib/utils.js

3.打开utils.js进行修改：

找到：

修改为：

完成第一步，此处使用刚安装好的库

然后找到：

修改为：

此处是为了处理egret publish的时候会引起的编译错误。

4.执行egret publis，可以正常发布。

目前我这么处理还没问题，不知道是否有隐藏问题，感谢指正。

ES6越来越广泛，期待Egret官方能够把常用集成库都处理成支持ES6的版本。

5.备注：

uglify在对第三方库生成.min.js时，如果想集成到Egret中，不要加参数，直接输出即可。示例如下：

1.错误写法，能正常debug能正常release但不能正常运行：

2.正确写法，全部正常：

** 补充：如果编译目标可为es5，忽略以上全部说明，直接在lib中添加es6配置即可，如下