SyntaxError:意外的令牌导出

Question

我正在开发一个名为foobar本地的npm包,允许我实时进行更改或修改,而无需发布/取消发布以改善开发时间和理智.

在projectTest,我foobar通过使用命令链接npm link foobar.如果您不知道,npm链接标志会为您的全局变量创建一个符号链接(您可以在此处阅读更多相关信息:https://docs.npmjs.com/cli/link)

该projectTest恰好是Reactjs项目,写在ES2015,的WebPack,巴贝尔等; 我从'package'导入{x},没有任何问题,等等.

如前所述,foobarnode_modules中存在的包有一个指向其开发目录的链接,但出于某种原因,当我尝试导入时:

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加载器的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'

我已经放置了一个等效的语法/文件,一个工作导入,我的utils或帮助函数,我在整个项目中使用没有问题.语法是:

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 user @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配置文件中,只在代码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

谢谢!

Answer 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的转译版本。