Webpack无法编译ES6文件的原因分析

首先给大家分享一个巨牛巨牛的人工智能教程，是我无意中发现的。教程不仅零基础，通俗易懂，而且非常风趣幽默，还时不时有内涵段子，像看小说一样，哈哈～我正在学习中，觉得太牛了，所以分享给大家！点这里可以跳转到教程

                    

在项目中使用了Webpack与ES6技术，但经常出现ES6文件没有编译的错误，如下：

main.js:62 Uncaught SyntaxError: Unexpected token export
  
1

浏览器提示export关键无法识别，显然ES文件没有被编译，依次诊断的顺序如下：

1. 确认是否存在.babelrc

如果没有在babel-loader里明确指定ES6的子集，那么系统根路径下必须包含.babelrc文件，其内容如下所示：

{  "presets": ["es2015", "stage-2"],  "plugins": ["transform-runtime"],  "comments": true}
  
1
2
3
4
5

需要注意的是，务必保证相关的包都安装完成，如babel-preset-stage-2、babel-plugin-transform-runtime。

2. 确认loader配置的路径是否正确

在babel-loader的配置中，include的配置路径必须是绝对路径，如下：

{    test: /\.es6$/,    loader: 'babel-loader',    //  这里必须是绝对路径    // 错误的写法 include: './es6'    include:path.resolve(__dirname, './es6')}
  
1
2
3
4
5
6
7

3. 确认ES6文件的后缀名是否匹配

确认ES6文件的后缀名与babel-loader的配置是否匹配，假如是以上的写法，ES6文件的后缀名必须是es6，否则将不会编译。

           

浏览人工智能教程