modular-typescript-import 是一款 npm 包，它能够让你在 TypeScript 项目中更加方便地按需加载依赖。
安装
可以使用 npm 或 yarn 安装该包。在项目根目录下执行以下命令：
npm install modular-typescript-import --save-dev # 或者 yarn add modular-typescript-import --dev
使用方法
下面是一个简单的使用示例：
import { Button } from 'modular-typescript-import/button';
在上面的代码中，Button 就是 button 模块导出的 Button 类型。
当使用该包时，你需要配置 TypeScript 的 baseUrl 和 paths 选项，以便让编译器能够正确地找到模块路径。
下面是一个 TypeScript 配置文件（tsconfig.json）的示例：
{ "compilerOptions": { "baseUrl": ".", "paths": { "modular-typescript-import/*": ["node_modules/modular-typescript-import/dist/*"] } } }
在上面的配置文件中，我们为 modular-typescript-import 包的模块路径设置了一个通配符，并将其映射到了包的 dist 目录下面。
示例代码
下面是一个更加完整的使用示例。假设我们有一个名为 Button 的组件，它的源码如下：
-- -------------------- ---- ------- -- -------------------- ------ ----- ------ - ------- ----- ------- ----------------- ------- - --------- - ----- - ------ -------- - ----- --- - --------------------------------- --------------- - ---------- -------------------------- - -展开代码
我们在 src 目录下创建一个 main.ts 文件作为入口文件，然后使用 modular-typescript-import 包按需加载所需的依赖：
// src/main.ts import { Button } from 'modular-typescript-import/button'; const btn = new Button('Click me!'); btn.render();
最后我们使用 webpack 打包我们的项目：
npx webpack --config webpack.config.js
现在我们就可以在浏览器中打开 dist/index.html 文件查看我们的按钮了。
总结
通过使用 modular-typescript-import 包，我们可以更加方便地按需加载依赖。当然，这只是一种选择，你也可以使用其他工具来达到相同的目的，比如 webpack 的代码分割功能等等。不过，当你的项目规模变得越来越大时，这样的工具会让你的工作更加高效和便捷。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005574181e8991b448d4391
