似乎无法让babel和webpack为ES2015工作，导致导入错误

Question

我的webpack.config.js就是这样：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: [
    'babel-polyfill',
    './app/main.js'
  ],
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'build.js'
  },
  module: {
    loaders: [
      {
        test: '/\.vue$/',
        loader: 'vue'
      },
      {
        test: '/\.js$/',
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new webpack.ExternalsPlugin('commonjs', [
      'electron'
    ])
  ]
}

我的.babelrc就是这个

{
  "presets": ["es2015"],
  "plugins": ["transform-runtime"]
}

我的./app/main.js就是这个

import vue from 'vue';
import App from './views/App.vue';

new vue({
  el: 'body',
  components: { App }
});

我的package.json依赖是这个

"dependencies": {
    "babel-polyfill": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "babel-register": "^6.18.0",
    "babel-runtime": "^5.8.38",
    "jquery": "^3.1.1",
    "vue": "^2.0.3"
  },
  "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.7",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-stage-0": "^6.16.0",
    "babel-preset-stage-2": "^6.18.0",
    "babel-runtime": "^5.8.38",
    "css-loader": "^0.25.0",
    "electron-prebuilt": "^1.4.5",
    "vue-hot-reload-api": "^2.0.6",
    "vue-html-loader": "^1.2.3",
    "vue-loader": "^9.7.0",
    "vue-style-loader": "^1.0.0",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2"
  }

但是当我尝试启动我的Electron程序时，我在控制台中收到此错误：

Uncaught SyntaxError: Unexpected token import

指向Line 1

的./app/main.js

我已经尝试将加载程序更改为babel而不是babel-loader，我尝试了一系列不同的预设，所有链接在google的前3页都是紫色的，但大多数都是指向相同的修复通常人们忘记了babel-preset-es2015，但我已经做到了。任何帮助都会很棒

运行节点版本6.9.1和NPM版本3.10.8

Answer 1

您的加载程序test参数是字符串，而不是正则表达式。因此，JavaScript文件永远不会匹配这些加载器（因为字符串测试将被解释为与之比较的绝对路径），并且文件永远不会以Babel开头处理。

只需将您的加载器更新为此，Webpack应该正常工作：

loaders: [
  {
    test: /\.vue$/, // note no quotes
    loader: 'vue'
  },
  {
    test: /\.js$/,  // note no quotes
    loader: 'babel-loader',
    exclude: /node_modules/
  }
]