当前位置：首页 > 软件库 > Web应用开发 > 常用JavaScript包 >

ts-monorepo

Template for setting up a TypeScript monorepo

授权协议 MIT License

开发语言 JavaScript

所属分类 Web应用开发、常用JavaScript包

软件类型开源软件

地区不详

投递者贺福

操作系统跨平台

开源组织无

适用人群未知

软件概览

Template project for setting up a TypeScript monorepo

Table of content

Features
Setup
Docs
Examples
- ts-node
- Babel
- webpack
- jest
- create-react-app
- NextJS
- NestJS

Features

The main focus of this repo is making the Go to definition feature in IDEs work without any surprises, meaning it will work after a fresh clone without needing to build the project.

The secondary focus is to remove surprises when publishing packages. The repo is set up so that each package gets a clean build output without any artifacts from other packages.

Everything else is kept to a minimum. Apart from my personal ESLint config to keep the code clean, there are no extra tools included — you're free to customize this to your own needs after cloning. Compilation targets, module systems, tree shaking etc. are left up to you to decide.

Setup

This main branch of this repo uses yarn workspaces, while the npm branch uses npm 7 workspaces.

yarn install

Docs

See the following blog posts:

If you're looking for the project references solution checkout the project-references branch.

Examples

This repo contains full examples of integrating with other tools and frameworks that need to be made aware that they're working with a monorepo. You can find each example in the examples/ folder.

ts-node

Use tsconfig-paths to resolve the path aliases at runtime:

{
  "scripts": {
    "start": "ts-node -r tsconfig-paths/register src/index.ts"
  }
}

See the full example here.

Babel

Use babel-plugin-module-resolver to resolve the path aliases:

module.exports = {
  presets: [
    ["@babel/preset-env", { targets: { node: "current" } }],
    "@babel/preset-typescript",
  ],

  plugins: [
    [
      "module-resolver",
      {
        alias: {
          "^@nighttrax/(.+)": "../\\1/src",
        },
      },
    ],
  ],
};

See the full example here.

webpack

Use tsconfig-paths-webpack-plugin to resolve the path aliases:

const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

module.exports = {
  resolve: {
    plugins: [new TsconfigPathsPlugin()]
  }
};

See the full example here.

jest

If you use Babel then see this example from the Babel section above.

If you use ts-jest then you can use its pathsToModuleNameMapper helper:

const { pathsToModuleNameMapper } = require("ts-jest/utils");
const { compilerOptions } = require("../../tsconfig.json");

module.exports = {
  preset: "ts-jest",

  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, {
    // This has to match the baseUrl defined in tsconfig.json.
    prefix: "<rootDir>/../../",
  }),
};

See the full example here.

create-react-app

Use craco or react-app-rewired to extend CRA's webpack config and apply the tsconfig-paths-webpack-plugin:

const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

module.exports = (config) => {
  // Remove the ModuleScopePlugin which throws when we
  // try to import something outside of src/.
  config.resolve.plugins.pop();

  // Resolve the path aliases.
  config.resolve.plugins.push(new TsconfigPathsPlugin());

  // Let Babel compile outside of src/.
  const oneOfRule = config.module.rules.find((rule) => rule.oneOf);
    const tsRule = oneOfRule.oneOf.find((rule) =>
      rule.test.toString().includes("ts|tsx")
    );
  tsRule.include = undefined;
  tsRule.exclude = /node_modules/;

  return config;
};

See the full example here.

NextJS

Extend Next's webpack config to enable compiling packages from the monorepo:

module.exports = {
  webpack: (config) => {
    // Let Babel compile outside of src/.
    const tsRule = config.module.rules.find(
      (rule) => rule.test && rule.test.toString().includes("tsx|ts")
    );
    tsRule.include = undefined;
    tsRule.exclude = /node_modules/;

    return config;
  },
};

See the full example here.

NestJS

Include the path aliases in both tsconfig.json and tsconfig.build.json and tell NestJS where to find the main.js file:

{
  "collection": "@nestjs/schematics",
  "sourceRoot": "src",
  "entryFile": "examples/nestjs/src/main"
}

See the full example here.

使用案例

monorepo搭建项目

�� yarn monorepo 这里：https://juejin.cn/post/7081440800143310884 安装 pnpm monorepo 的项目，限制只能使用 pnpm 如果已经安装了 pnpm 可以跳过此步骤安装 pnpm 命令： npm i pnpm -g 初始化项目首先新建一个文件夹，名为 vue3-pnpm-monorepo 进入 vue3-pnpm-mon
用 pnpm 管理 Monorepo 项目

用 pnpm 管理 Monorepo 项目 1. 什么是 Monorepo ? Monorepo是管理项目代码的方式之一，指在一个大的项目仓库（repo）中管理多个模块/包（package），这种类型的项目大都在项目根目录下有一个 packages 文件夹，分多个项目管理。大概结构如下： ├── packages | ├── pkg1 | | ├── package.json |
Vue3 Monorepo

朗朗朗 To 个人主页关注不迷路  Vue3 Monorepo 开箱即用的Vue3工程模板，采用Monorepo组织代码块。源码地址包管理器 pnpm，monorepo 架构 Web 框架 vue3 UI 框架 element-ui 采用 monorepo 架构，组织 API、UI、工程之间的互相引用。模块介绍 @web/core 工程工程的核心模块，为一些通用的代码，如： useEl

ts-monorepo

Features

Setup

Docs

Examples

ts-node

Babel

webpack

jest

create-react-app

NextJS

NestJS

同类工具

相关阅读

相关文章

相关问答

相关文档