似乎无法让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

指向./app/main.js Line 1 ./app/main.js

我尝试将加载程序更改为babel而不是babel-loader并且尝试了很多不同的预设，所有链接在Google的前3页上均为紫色，但大多数链接指向的是通常会忘记babel-preset-es2015修复程序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/
  }
]