如何用Webpack+TypeScript创建支持本地/全局安装的npm包及目录解惑

一、核心目录的区别与用途 #

• src/：存放你编写的原始代码（比如TypeScript、未转译的ES6+ JS），是开发阶段的工作目录，仅面向开发人员，无需发布到npm。
• lib/：存放转译/打包后的可执行JS代码，是供用户或依赖项目直接调用的最终代码，需要发布到npm。这是npm生态里约定俗成的转译后代码目录，比前端项目常用的dist更贴合npm包场景。
• bin/：存放CLI命令的入口文件，用于将你的包关联到系统命令行，实现全局安装后直接通过命令调用功能。

二、你的思路验证 #

整体方向是正确的，细节上可以优化：

1. 打包目标从dist改为lib完全合理，符合npm包的通用规范。
2. 不一定需要手动创建bin目录：
   • 简单场景下，直接在package.json的bin字段里指定lib目录下的CLI入口即可，比如：

     {
       "bin": {
         "my-cli": "./lib/cli.js"
       }
     }
     

   • 若CLI逻辑复杂，单独创建bin目录管理入口更清晰：在bin目录下写一个入口文件（比如cli.js），开头必须加#!/usr/bin/env node声明运行环境，然后导入lib里的核心逻辑，示例：

     #!/usr/bin/env node
     require('../lib/cli-core.js');
     

     再在package.json里指向这个bin文件："bin": "./bin/cli.js"

三、lib和bin目录的Git处理 #

• lib/：分两种情况
  • 如果你配置了prepublishOnly脚本，在npm发布前自动执行打包，可将lib加入.gitignore，避免提交构建产物；
  • 如果你希望克隆仓库的人无需手动执行打包就能直接运行代码，可将lib提交到Git。两种方案都可行，取决于团队协作习惯。
• bin/：如果bin目录里的文件是手动编写的入口模板（非打包生成），需要提交到Git；如果是打包自动生成的，则加入.gitignore。

四、实用学习资源 #

• 研读npm官方文档的「Creating Node.js Modules」章节，里面明确覆盖了目录结构、bin配置、发布流程等核心内容；
• 参考知名CLI npm包（如eslint、prettier）的仓库结构，观察它们的src、lib、bin组织方式；
• 学习npm脚本配置，用prepublishOnly自动触发打包，避免手动操作失误，示例：

  {
    "scripts": {
      "build": "tsc && babel src --out-dir lib",
      "prepublishOnly": "npm run build"
    }
  }
  

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