似乎無法讓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/
  }
]