如何在Webpack构建和NodeJS服务器进程之间共享代码？

Question

我的应用程序的目录结构大致如下：

- `src-program/` - 包含前端代码，包括 `package.json` 和 `webpack.config.js` - `src-server/` - 包含后端代码，包括不同的 `package.json` 和 `.babelrc` - `shared/foo.js` - 是前端和后端都需要的 JavaScript 代码

所有的代码都使用 ES2015 语法，因此使用 Babel 进行转译。

对于前端，使用 babel-loader 在 Webpack 构建期间进行“转译”。

对于后端，则通过 babel-register 实现即时转译。

`shared/foo.js` 需要其他模块，在前端和后端的 `package.json` 文件中都可以找到。

由于NodeJS/Webpack解析模块的方式，共享模块通常无法被找到。

---

对于Webpack，我以一种有些hacky的方式解决了这个问题，使用以下配置：

resolve: {
  root: __dirname,
  fallback: [
    __dirname + "/../shared",
    __dirname + "/node_modules"

  ],
  extensions: ['', '.js', '.jsx']
},

第一个fallback确保解析“shared”模块，第二个fallback确保仍然将由共享模块所需的模块解析到前端node_modules目录中。

这使得包含共享模块变得非常简单：

import * as foo from 'foo';

---

然而，我遇到了困难，无法使后端（即NodeJS）以相同的方式解析共享模块。我尝试使用app-module-path，这样foo.js就可以解析，但是文件要么没有被Babel处理，要么像transform-runtime这样的附加Babel模块（间接地由foo.js需要）无法解析，因为它们驻留在src-server/node_modules中... 我可能可以通过预转换代码而不是使用babe-register来解决这个问题，但总体上感觉都不对。那么，“在Webpack构建和NodeJS服务器进程之间共享代码的好方法是什么”？

- Udo G

Answer 1

你能将共享模块打包成一个npm包（即使只是存储在你的文件系统上的包）吗？然后你的src-program和src-server项目可以将其作为依赖项添加到它们的package.json中，并且它将被复制到它们各自的node_modules文件夹中。

参见：如何指定本地模块作为npm包依赖项

- Tyler Schroeder