使用依赖项构建monorepo babel编译的节点JS应用程序

Question

I am working on a project that is hosted as a monorepo. For simplification purposes let's say that inside there are three self-explanatory packages: server , a webapp client and library . The directory structure would be something like the following:

the-project 
  packages
    server
      src
    webapp
      src
    library
      src

All packages employ flow type notation, use a few >ES5 features and, for this reason, go through babel transpilation. The key difference is that transpilation of the webapp package is done via webpack, whereas server employs a gulp task that triggers script transpilation through the gulp-babel package. library is transpiled automatically when web is built.

Now, the problem I have is that for server to build, babel requires library to be built first and its package.json to specify its (built) main JS source file so its transpiled artifacts can be included. As you can imagine, this would quickly become problematic if the project were to contain multiple libraries that are actively being developed (which it does), as all would require building, including any dependent packages (like server in this simple case).

As an attempt to overcome this annoyance, I initially thought of using webpack to build the server, which would take care of including whatever dependencies it requires into a bundle, but I ran into issues as apparently webpack is not meant to be used on node JS applications.

What strategies are available for building a node JS application requiring Babel transpilation, such that the application's source files as well as any dependencies are built transparently and contained in a single output directory?

---

Annex A

Simplified gulp task for transpilation of scripts, as employed by server .

return gulp
  .src([`src/**/*.js`], { allowEmpty: true })
  .pipe(babel({ sourceMap: true }))
  .pipe(gulp.dest('dist'));

As can be seen above, only server 's own source files are included in the task. If src were to be changed to also include library , the task would emit the dependencies' artifacts in server 's own output directory and any require('library') statements within would attempt to locate the built artifacts in packages/library and not packages/server/dist , thus resulting in import failures.

Answer 1

First of all, I am not sure what your server is doing. If it is doing a database connection or some calculations then I would not recommend it to be built by webpack . Whereas If your server is just doing Server-Side Rendering and making some API calls to other servers then I would recommend it to be bundled using webpack .

A lot of projects follow this philosophy. For example, you can take a look at something similar, I have done in one of my personal projects [Blubus] . Specifically, you might be interested in webpack-server-config . And also you can take a look at how big projects like spectrum does it.