From 303331c77f2de06c771e9aef5df2c930a92e0d31 Mon Sep 17 00:00:00 2001 From: Ming Date: Thu, 10 Oct 2024 17:11:21 +0800 Subject: [PATCH] fix: should load ts-node from project (#6341) --- .changeset/weak-clocks-knock.md | 7 +++++ .../main-doc/docs/zh/plugin/introduction.mdx | 8 +++--- .../solutions/app-tools/src/utils/register.ts | 5 +++- packages/toolkit/utils/src/cli/require.ts | 27 +++++++++++++++++++ 4 files changed, 42 insertions(+), 5 deletions(-) create mode 100644 .changeset/weak-clocks-knock.md diff --git a/.changeset/weak-clocks-knock.md b/.changeset/weak-clocks-knock.md new file mode 100644 index 000000000000..f64ee6052cad --- /dev/null +++ b/.changeset/weak-clocks-knock.md @@ -0,0 +1,7 @@ +--- +'@modern-js/app-tools': patch +'@modern-js/utils': patch +--- + +fix: should load ts-node from project +fix: 应该从项目中加载 ts-node diff --git a/packages/document/main-doc/docs/zh/plugin/introduction.mdx b/packages/document/main-doc/docs/zh/plugin/introduction.mdx index 376a87c69fb6..2edce5a10e4c 100644 --- a/packages/document/main-doc/docs/zh/plugin/introduction.mdx +++ b/packages/document/main-doc/docs/zh/plugin/introduction.mdx @@ -6,7 +6,7 @@ Modern.js 拥有自己的框架插件系统，你可以通过在 `modern.config.ts` 中配置 [`plugins`](/configure/app/plugins) 字段来使用 Modern.js 插件。 -### 插件类型 +### 插件类型 框架插件可以细分成三类，分别是： @@ -62,8 +62,8 @@ Modern.js 从 `MAJOR_VERSION.46.0` 起开始将底层的构建工具升级为 [R | [CSS Minimizer 插件](https://github.com/rspack-contrib/rsbuild-plugin-css-minimizer) | 用于自定义 CSS 压缩工具，切换到 [cssnano](https://cssnano.co/) 或其他工具进行 CSS 压缩。 | [tools.minifyCss](/configure/app/tools/minify-css.html) | | [Pug 插件](https://github.com/rspack-contrib/rsbuild-plugin-pug) | 提供对 Pug 模板引擎的支持 | [tools.pug](/configure/app/tools/pug.html) | | [Rem 插件](https://github.com/rspack-contrib/rsbuild-plugin-rem) | 用于实现移动端页面的 rem 自适应布局 | [output.convertToRem](/configure/app/output/convert-to-rem.html) | -| [YAML 插件](https://github.com/rspack-contrib/rsbuild-plugin-yaml) | 用于引用 YAML 文件，并将其转换为 JavaScript 对象 | [TOML 文件](/guides/basic-features/static-assets/json-files.html#toml-文件) | -| [TOML 插件](https://github.com/rspack-contrib/rsbuild-plugin-toml) | 用于引用 TOML 文件，并将其转换为 JavaScript 对象 | [YAML 文件](/guides/basic-features/static-assets/json-files.html#yaml-文件) | +| [YAML 插件](https://github.com/rspack-contrib/rsbuild-plugin-yaml) | 用于引用 YAML 文件，并将其转换为 JavaScript 对象 | [YAML 文件](/guides/basic-features/static-assets/json-files.html#yaml-文件) | +| [TOML 插件](https://github.com/rspack-contrib/rsbuild-plugin-toml) | 用于引用 TOML 文件，并将其转换为 JavaScript 对象 | [TOML 文件](/guides/basic-features/static-assets/json-files.html#toml-文件) | #### 未内置的插件 @@ -75,4 +75,4 @@ Modern.js 从 `MAJOR_VERSION.46.0` 起开始将底层的构建工具升级为 [R import OtherPlugins from '@site-docs/components/other-plugins.mdx'; - \ No newline at end of file + diff --git a/packages/solutions/app-tools/src/utils/register.ts b/packages/solutions/app-tools/src/utils/register.ts index 161d5c850591..aa04c24fe194 100644 --- a/packages/solutions/app-tools/src/utils/register.ts +++ b/packages/solutions/app-tools/src/utils/register.ts @@ -3,6 +3,8 @@ import { fs, type Alias, getAliasConfig, + loadFromProject, + logger, readTsConfigByFile, } from '@modern-js/utils'; import type { ConfigChain } from '@rsbuild/core'; @@ -72,7 +74,7 @@ export const registerCompiler = async ( const { MODERN_NODE_LOADER } = process.env; if (MODERN_NODE_LOADER !== 'esbuild') { try { - const tsNode = await import('ts-node'); + const tsNode = await loadFromProject('ts-node', appDir); const tsNodeOptions = tsConfig['ts-node']; if (isTsProject) { tsNode.register({ @@ -89,6 +91,7 @@ export const registerCompiler = async ( }); } } catch (error) { + logger.error(error); await registerEsbuild({ isTsProject, tsConfig, diff --git a/packages/toolkit/utils/src/cli/require.ts b/packages/toolkit/utils/src/cli/require.ts index 4771347f3d8f..bbed574ec91f 100644 --- a/packages/toolkit/utils/src/cli/require.ts +++ b/packages/toolkit/utils/src/cli/require.ts @@ -33,6 +33,33 @@ export async function compatibleRequire( : requiredModule; } +export async function loadFromProject(moduleName: string, appDir: string) { + let requiredModule; + const paths = [appDir, process.cwd()]; + + try { + if (typeof require !== 'undefined') { + const modulePath = require.resolve(moduleName, { paths }); + requiredModule = require(modulePath); + } else { + //@ts-ignore + const { createRequire } = await import('node:module'); + //@ts-ignore + const require = createRequire(import.meta.url); + const modulePath = require.resolve(moduleName, { paths }); + const moduleUrl = pathToFileURL(modulePath).href; + requiredModule = await import(moduleUrl); + } + + return requiredModule.default || requiredModule; + } catch (error: any) { + if (error.code === 'MODULE_NOT_FOUND') { + throw new Error(`Cannot find module ${moduleName}.`); + } + throw error; + } +} + // Avoid `import` to be tranpiled to `require` by babel/tsc/rollup export const dynamicImport = new Function( 'modulePath',