未捕获的 SyntaxError:` 意外的令牌导入答案

【问题标题】：Uncaught SyntaxError:` Unexpected token import未捕获的 SyntaxError:` 意外的令牌导入
【发布时间】：2016-12-09 03:31:14
【问题描述】：

我正在开发一个反应应用程序。我在哪里使用 webpack 和 babel 加载器。在我的反应应用程序中，我多次使用导入语句，它工作正常。

现在我有了另一个运行良好的独立应用程序。现在我正在使用 npm 在反应应用程序中安装我的独立应用程序。所以我这样做了

let standAloneApplication =  require("my_stand_alone_application")

但我在standAloneApplication 中遇到导入错误。我有一条线的地方 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 () {

}

【问题讨论】：

您可以尝试使用具有以下内容的文件.babelrc：{“presets”：[“es2015”，“react”]}，我认为您的path.resolve不应该是'htlm '
在import {Controller} from "./Controller/index.js"之后不应该有;吗？（只是想知道）
如果es2015运行正常，;是可选的
@DavidR ;不是强制性的。 @ Alessander França 当我删除我的独立应用程序的要求时它工作正常。我在其他地方多次使用导入。 .babelrc 文件在节点模块和反应应用程序根目录中都可用

标签： javascript node.js npm webpack babeljs

【解决方案1】：

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

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

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

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

【讨论】：

像魅力一样工作
这也适用于我，但更好的解决方案是在我的库（或 Ashisha 的独立应用程序）上设置和运行构建，其中包括使用 Babel 编译 es6。然后，'dist' 版本将可以按原样使用，就像任何其他 npm 包一样。