Babel无法转译npm链接/符号链接软件包源代码

7
我将设置一个使用Node的共享模块环境。这里是我的目录结构:

我´正在使用节点设置共享模块环境。这是我的目录结构:

project
 |--common
 |    |--package.json
 |    |--graphql
 |          |----schema.js
 |
 |--server
     |--package.json
     |--server.js

将两个项目链接起来:

$ cd project\common
$ npm link

然后:

$ cd ../server
$ npm link common

常用的 Package.json 文件:

{
  "name": "common",
  "private": true,
  "version": "3.0.0",
  "description": "Common code for all projects",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Me",
  "license": "MIT"
}

server package.json文件:

{
  "name": "server",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "concurrently \"babel-node start-server\" \"babel-node start-client\"",
    "server": "nodemon --exec \"babel-node start-server.js\"",
    "client": "nodemon --exec \"babel-node start-client.js\"",
    "lint": "eslint ."
  },
  "dependencies": {
    "babel-cli": "^6.24.1",
    "babel-core": "^6.25.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2016": "^6.24.1",
    "babel-preset-es2017": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.17.2",
    "common": "file:../common",
    "connect-mongo": "^2.0.0",
    "crypto": "^1.0.1",
    "express": "^4.15.3",
    "express-graphql": "^0.6.12",
    "graphql": "^0.13.1",
    "graphql-relay": "^0.5.4",
    "jwt-simple": "^0.5.1",
    "mongoose": "^5.0.10",
    "morgan": "^1.8.2",
    "nodemailer": "^4.6.0",
    "passport": "^0.4.0",
    "passport-jwt": "^4.0.0",
    "path": "^0.12.7",
    "validator": "^9.1.1"
  },
  "devDependencies": {
    "concurrently": "3.5.1",
    "eslint": "^4.18.2",
    "eslint-config-airbnb": "16.1.0",
    "eslint-plugin-import": "2.9.0",
    "eslint-plugin-jsx-a11y": "6.0.3",
    "eslint-plugin-react": "7.7.0",
    "fs-extra": "^5.0.0",
    "node-fetch": "^2.1.1",
    "nodemon": "^1.11.0"
  },
  "babel": {
    "presets": [
      "es2015",
      "stage-0",
      "es2017"
    ],
    "plugins": [
      "transform-runtime"
    ]
  }
}

Server.js代码:

import schema from "common/graphql/schema";
...

运行服务器应用程序:

$ npm run server
import { GraphQLSchema } from 'graphql';
^^^^^^
SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at loader (D:\project\server\node_modules\babel-register\lib\node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (D:\project\server\node_modules\babel-register\lib\node.js:154:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (D:/9. DEV/WORKSPACE/amplifactory/server/routes.js:25:1)
    at Module._compile (module.js:570:32)
    at loader (D:\project\server\node_modules\babel-register\lib\node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (D:\project\server\node_modules\babel-register\lib\node.js:154:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
[nodemon] app crashed - waiting for file changes before starting...

根据我所见,Babel不能转译位于server目录之外的代码,但是如果不将common文件夹放在server目录之外,我就无法构建共享代码。

如何解决这个问题并使Babel正确转译?

1个回答

4

你可能不会喜欢这个答案,或许在2018年春季会有更好的解决方案,但是你可能需要为你的通用代码设置一个单独的构建步骤。我有一个类似的项目,其中用于通用代码的package.json文件如下所示:

{
  "name": "stripmall_gcloud_services",
  "version": "1.0.0",
  "description": "wraps up some commonly used google helpers",
  "main": "./dist/index.js",
  "scripts": {
    "test": "standard --fix && mocha -r babel-register",
    "build": "babel lib -d dist"
  }...}

请注意npm的构建步骤会将公共代码进行转换。注意,main键指向转换目录中的index.js文件。每当您更新公共代码时,只需运行npm run build即可,所有链接都将按预期工作。


感谢@Robert Moskal的帖子。事实上,正如你所说,这不是一个解决方案,而是一个变通方法。我会稍微尝试一下这个... - Mendes
我期待着看到一个解决方案。在新项目中,我基本上停止了将我的服务器端代码转译,并使用旧的导出方式。 - Robert Moskal
4
你是否曾经找到更好的方法? - Robert Moskal

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接