配置Babel与Webpack后导入JS类报错，类属性语法解析失败

这个错误的根源有两个：类公有字段语法未被Babel转译，以及webpack的babel-loader未覆盖fe-common目录下的文件，下面是具体的解决步骤：

1. 理解报错原因 #

你代码里的authenticated = this.isAuthenticated()属于类公有字段语法，这是一个ES提案特性，并不包含在你当前使用的babel-preset-stage-2里（Babel 6的stage-2预设不涵盖这个特性）；同时webpack的babel-loader没有处理fe-common目录下的JS文件，导致这些文件的未转译语法被webpack直接解析，从而触发报错。

2. 安装类字段转译插件 #

首先安装专门处理类公有字段语法的Babel插件：

npm install babel-plugin-transform-class-properties --save-dev

3. 更新Babel配置 #

修改你的Babel配置文件，将这个插件添加到全局和test环境的plugins数组中：

{
	"presets": [ ["env", { "modules": false }], "stage-2" ],
	"plugins": ["transform-runtime", "transform-class-properties"],
	"comments": false,
	"env": {
		"test": {
			"presets": ["env", "stage-2"],
			"plugins": [ "istanbul", "transform-class-properties" ]
		}
	}
}

4. 调整webpack的babel-loader范围 #

你的webpack配置中，babel-loader只处理了src、test和webpack-dev-server/client的文件，但报错的auth.js在fe-common/src目录下，所以需要把这个目录加入到include列表：

function resolve (dir) { return path.join(__dirname, '..', dir) }
//...
{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [
    resolve('src'), 
    resolve('test'), 
    resolve('node_modules/webpack-dev-server/client'),
    resolve('fe-common/src') // 新增该行，让babel处理fe-common下的源码
  ]
}

完成以上步骤后，重启webpack-dev-server，类字段语法会被正常转译，fe-common目录下的文件也会被babel-loader处理，这个错误就应该解决了。

内容的提问来源于stack exchange，提问作者roberto tomás