Uncaught SyntaxError：`意外的令牌导入

Question

我正在研究一个反应应用程序。 我在哪里使用webpack和babel装载机。 在我的反应应用程序中，我多次使用import语句，这是正常的。

现在我有另一个独立的应用程序，工作正常。 现在我使用npm在react应用程序中安装我的独立应用程序。 所以我这样做

let standAloneApplication =  require("my_stand_alone_application")

但是我在standAloneApplication中遇到导入错误。 我有一个import controller from "./controller" // Main.js:1Uncaught SyntaxError:的行import controller from "./controller" // Main.js:1Uncaught SyntaxError:意外的令牌导入

React应用程序中的import语句正常工作。 独立应用也可以单独使用。 但它在一起它给出了SyntaxError

我的webpack文件

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

var BUILD_DIR = path.resolve(__dirname, 'html');
var APP_DIR = path.resolve(__dirname, 'html');

var config = {
  entry: APP_DIR + '/app.js',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
   devtool: "source-map",
   node: {
     fs: "empty"
   } ,
      module : {
    loaders : [
      {
        test : /\.js?/,
        include : APP_DIR,
        exclude: /node_modules/,
        loaders: ['babel?presets[]=react,presets[]=es2015,plugins[]=transform-decorators-legacy,plugins[]=transform-class-properties,plugins[]=transform-export-extensions'],
      },

      { test: /\.json$/, loader: "json" }
    ]
  }
}

module.exports = config;

main.js来自独立应用程序的代码

import {Controller} from "./Controller/index.js"

export class Main () {

} 

Answer 1

请注意您的加载程序设置中的exclude: /node_modules/ 。

由于您使用npm安装了应用程序/模块，因此它位于该目录中，并且由于排除它将不会被Babel转换。

也许，但我不确定，您可以将其明确添加到include行：

include : [
  APP_DIR,
  path.resolve(__dirname, 'node_modules/my_stand_alone_application')
]