Question

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

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

projectTest碰巧是一个Reactjs项目，用ES2015，Webpack，babel等编写;我在哪里导入{x}来自＆＃39; package＆＃39;，没有任何问题等。

如前所述，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加载器的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或helper函数的工作导入，我在整个项目中使用没有问题。语法是：

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开发配置文件中，运行时只有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，node v7.4.0

谢谢！

Answer 1

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

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

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

SyntaxError：意外的令牌导出

1 个答案: