不使用打包工具时，如何正确使用TypeScript？附项目实操问题

"dependencies": {
"lib": "../lib/"
...

`/project/src/index.ts`内容：
```typescript
import { createWrappedGrid } from "lib";

createWrappedGrid();

代码能编译，但遇到两个问题：

1. 编译后的代码仍保留import { createWrappedGrid } from "lib";，浏览器无法识别“lib”这个裸模块标识符。我知道可以用import map，但原以为TypeScript编译器会自动处理，有没有相关配置选项？
2. node_modules及传递依赖（如ag-grid）没出现在输出目录里，有没有相关标志、扩展或工具能解决这个问题？

问题1：编译后保留裸模块导入，浏览器无法识别 #

TypeScript本身仅负责类型检查与编译，不会自动将裸模块导入（如import "lib"）转换为浏览器可识别的相对路径，需要配合额外工具或配置处理：

方案1：TS paths配置 + tsc-alias工具 #

• 在/project/tsconfig.json中添加paths映射，把"lib"指向实际文件路径：

  {
    "compilerOptions": {
      "baseUrl": "./",
      "paths": {
        "lib": ["./../lib/dist/index.js"] // 假设lib编译后输出到dist目录
      },
      "module": "ESNext",
      "moduleResolution": "NodeNext",
      "target": "ESNext",
      "outDir": "./dist"
    }
  }
  

• 安装tsc-alias：npm i -D tsc-alias
• 修改编译脚本，在TS编译后执行路径替换：

  "scripts": {
    "build": "tsc && tsc-alias"
  }
  

  执行后，编译后的JS文件里的import "lib"会被替换为对应的相对路径。

方案2：使用Import Map #

如果不想修改代码中的导入路径，可以在HTML中通过Import Map告诉浏览器裸模块对应的实际地址：

<script type="importmap">
  {
    "imports": {
      "lib": "../lib/dist/index.js",
      "ag-grid-community": "./node_modules/ag-grid-community/dist/ag-grid-community.esm.js"
    }
  }
</script>

注意：需要确保lib和依赖库都以ES模块格式输出（对应package.json需添加"type": "module"，TS配置module: ESNext）。

问题2：node_modules及传递依赖未输出到目录 #

浏览器无法直接访问项目根目录的node_modules，必须把用到的依赖文件复制到输出目录，或用工具自动处理：

方案1：用copyfiles手动复制依赖 #

• 安装copyfiles：npm i -D copyfiles
• 在/project/package.json中添加复制脚本：

  "scripts": {
    "copy-deps": "copyfiles -u 1 node_modules/ag-grid-**/*.js dist/node_modules/"
  }
  

• 配合编译脚本执行：npm run build && npm run copy-deps

方案2：用Rollup替代TSC（更适合ES模块拆分） #

Rollup可以自动解析并打包用到的依赖，同时保留模块结构：

• 安装依赖：npm i -D rollup @rollup/plugin-typescript @rollup/plugin-node-resolve @rollup/plugin-commonjs typescript
• 创建rollup.config.js：

  import typescript from '@rollup/plugin-typescript';
  import resolve from '@rollup/plugin-node-resolve';
  import commonjs from '@rollup/plugin-commonjs';
  
  export default {
    input: 'src/index.ts',
    output: {
      dir: 'dist',
      format: 'es',
      preserveModules: true // 保留独立模块文件，不合并
    },
    plugins: [
      typescript(),
      resolve(), // 解析node_modules中的模块
      commonjs() // 将CommonJS格式的依赖转为ES模块
    ]
  };
  

• 修改脚本："build": "rollup -c"，执行后依赖会被自动打包到dist目录，且导入路径会被处理为相对路径。

方案3：用Vite作为构建工具（最省心） #

Vite天生支持ES模块，自动处理裸模块导入与依赖拆分：

• 在/project中初始化Vite：npm create vite@latest . -- --template vanilla-ts
• 修改vite.config.ts添加lib的别名：

  import { defineConfig } from 'vite';
  import path from 'path';
  
  export default defineConfig({
    resolve: {
      alias: {
        'lib': path.resolve(__dirname, '../lib/src')
      }
    }
  });
  

• 执行npm run build，Vite会自动把项目代码和用到的依赖拆分成独立文件，输出到dist目录，浏览器可直接识别所有导入路径。

内容的提问来源于stack exchange，提问作者Cheetah