SyntaxError：意外的令牌导出答案

【问题标题】：SyntaxError: Unexpected token exportSyntaxError：意外的令牌导出
【发布时间】：2017-07-17 05:26:05
【问题描述】：

我正在本地开发一个名为 foobar 的 npm 包，以允许我实时进行更改或修改，而无需发布/取消发布以缩短开发时间和健全性。

在projectTest 中，我使用命令npm link foobar 链接了foobar。如果您不知道，npm 链接标志会为您的全局变量创建一个符号链接（您可以在此处阅读更多信息：https://docs.npmjs.com/cli/link）

projectTest恰好是一个Reactjs项目，用ES2015、Webpack、babel等编写；以及我从'package'导入{x}的地方，没有任何问题，等等。

如前所述，node_modules 中存在的包foobar 有一个指向其开发目录的链接，但由于某种原因，当我尝试导入时：

import { myFn } from 'foobar'

控制台抛出如下错误：

/foobar/lib/index.js:3
export const loadImage = () => {
^^^^^^
SyntaxError: Unexpected token export
    at Object.exports.runInThisContext (vm.js:78:16)
    at Module._compile (module.js:543:28)

这不是预期的，因为其他导入就地工作完美；为什么在代码也是 ES2015 的其他现有导入中不会发生这种情况？它不是提前转译或转译为静态文件，而是实时 AFAIK，因为我使用 babel loader 设置了 webpack，例如：

var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var AssetsPlugin = require('assets-webpack-plugin')
var assetsPluginInstance = new AssetsPlugin()

module.exports = {
  devtool: 'inline-source-map',
  context: path.resolve(__dirname, 'src'),
  entry: [
    'react-hot-loader/patch',
    'webpack/hot/dev-server',
    'webpack-hot-middleware/client',
    'babel-polyfill',
    './js/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/assets/',
    filename: 'js/bundle.js?[hash]'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          'babel-loader'
        ]
      }
      ...
}

我想了解发生这种情况的原因！因此，为了帮助我跟踪问题，尝试导入不是到 node_module 的链接包，而是导入到完整或相对路径，例如：

import { myFn } from '/bar/zoo/lar/deep/foobar'

我放置了一个等效的语法/文件，它是我的实用程序或辅助函数的工作导入，我在整个项目中使用它没有问题。语法是：

export const myFn = () => {
  return 'myFn call!'
}

我从我的app.js 导入它，比如说：

import { myFn } from './utils' // works fine! BUT if I DO:
import { myFn } from '/path/to/packageFoobar' // I get the syntax error!

SO 用户@felixKling 留下了一条关于 webpack node_module 被忽略的好评论，我现在已经对其进行了测试，但删除 node_module 后我仍然收到错误：

(function (exports, require, module, __filename, __dirname) { export const styleObjectParser = str => {
                                                              ^^^^^^
SyntaxError: Unexpected token export
    at Object.exports.runInThisContext (vm.js:78:16)
    at Module._compile (module.js:543:28)

从我目前看到的情况来看，在 webpack dev 配置文件中，只有context 下的代码在运行时是transpiled。但我可能错了：

module.exports = {
  devtool: 'inline-source-map',
  context: path.resolve(__dirname, 'src'),
  entry: [
    'react-hot-loader/patch',
    'webpack/hot/dev-server',
    'webpack-hot-middleware/client',
    'babel-polyfill',
    './js/index.js'
  ],

我想确认更改语法效果很好，所以这与 babel-loader 运行的上下文有关。即使我不明白为什么会发生语法错误，即使删除了 node_module 排除项。

module.exports = {
  myFn: function () {
    console.log('Syntax correct! myFn works!')
  }
}

我正在使用 webpack2，节点 v7.4.0

【问题讨论】：

你自己说的，foobar 存在于node_modules。你的 webpack 配置忽略了node_modules。
@FelixKling 感谢您的关注！是的，我还测试了从相对路径或完整路径导入，以测试这一事实；这意味着，即使在这种情况下它也会失败。因此，它似乎与 webpack 的工作方式有关，它只为正确上下文中的文件运行加载器，即 babel 加载器。但我可能错了。
你使用的是哪个 webpack 版本？您是否尝试过删除 exclude 条件（或将其替换为不排除 foobar 的内容）？
@FelixKling 首先，非常感谢您的帮助！用它更新了描述。不幸的是，它没有用。我将研究并阅读 Webpack 2 的“上下文”。
@punkbit webpack 2 在这里提供了帮助。我确实有同样的问题

标签： javascript npm ecmascript-6 babeljs transpiler

【解决方案1】：

我认为问题是 foobar 项目在与 npm 链接链接时没有被转译，但 projectTest 不应该编译 foobar 项目，它应该只是链接它。在将 foobar 链接到其他项目之前，您必须使用 babel 转换它。可以在 foobar 项目的 package.json 中添加构建脚本，将代码转译到 /dist 文件夹中，这样修改 package.json 的 main 字段：

"main": "./dist/index.js"

在您的开发过程中添加npm run build，以便在开发 foobar 时更新 dist 文件夹。现在 projectTest 应该链接 foobar 的转译版本。

【讨论】：