TypeScript + Webpack打造inkjs工作流：Asset Modules直接导入.ink文件的完整配置指南

TypeScript Webpack打造inkjs工作流Asset Modules直接导入.ink文件的完整配置指南【免费下载链接】inkjsA javascript port of inkles ink scripting language.项目地址: https://gitcode.com/gh_mirrors/in/inkjsinkjs是 inkle 开发的 ink 互动叙事脚本语言的 JavaScript 移植版。本文带你用 TypeScript Webpack 5 的 Asset Modules 特性直接把.ink故事文件导入项目跳过繁琐的 JSON 编译步骤一套完整配置让新手也能快速上手。为什么推荐 Asset Modules 直接导入 .ink 文件传统流程需要先用inkjs-compiler把.ink文件编译成 JSON再由运行时加载。而 inkjs 2.1.0 起支持在构建时直接编译 ink 源文件 免手工编译修改故事后无需重新运行编译脚本 内联打包.ink内容直接内联进 JS 产物部署更简单 天然适配对 React、Vue 等 TypeScript Webpack 项目零额外服务依赖官方指南见docs/working-with-typescript-and-webpack.md类型声明模板可参考 templates/typescript_with_compiler/src/index.ts。第一步安装 inkjs在项目中执行安装即可inkjs 零依赖兼容所有浏览器与 Node.jsnpm install inkjs 提示完整功能含 Compiler需从inkjs/full入口引入这是 package.json 中exports字段定义的/full子路径。第二步Webpack 5 配置 Asset ModulesWebpack 5 用 Asset Modules 加载静态资源。只需在webpack.config.js的module.rules中加一条规则让.ink文件以原始源码字符串asset/source形式内联进脚本rules: [ { test: /\.ink$/i, type: asset/source, }, // ...其余规则 ];这样做的效果任何import data from ./myStory.ink得到的都是 ink 源码文本可交给 inkjs 的 Compiler 即时编译。适合单个故事文件、无条件使用的应用场景。第三步TypeScript 模块声明关键一步在 TypeScript 中导入.ink会报错Cannot find module ../assets/myStory.ink or its corresponding type declarations.解决方法是在源码顶层创建一个global.d.ts声明文件告诉编译器.ink导入结果是字符串declare module *.ink { const value: string; export default value; }如果声明不生效检查tsconfig.json用include指定该文件位置{ include: [path/to/global.d.ts] }第四步导入并编译你的 .ink 故事三行代码完成导入 编译 得到可交互故事import { Compiler } from inkjs/full; import data from ./assets/myStory.ink; const inkStory new Compiler(data).Compile();之后就能调用inkStory.Continue()推进剧情、读取inkStory.currentChoices获取选项。编译入口的核心实现在 src/compiler/Compiler.ts想要理解底层行为可以顺着源码读一读。如果想先跑通再优化不妨直接用现成模板 templates/browser_with_server/story.json 的目录结构把story.json换成你的myStory.ink即可。常见问题排查现象原因与解决导入.ink报找不到模块缺少declare module *.ink声明或tsconfig.json的include没覆盖global.d.ts导入结果是文件 URL 而非文本Webpack 规则误用asset/resource应改为asset/source只引inkjs却找不到CompilerCompiler 在完整包中请改用import { Compiler } from inkjs/full故事频繁更新、想免刷新改用 fetch 动态加载 JSON 的方式参考 README.md 中 Working with a JSON file 一节小结用 Webpack 5 的 Asset Modules 配置asset/source配合一行declare module *.ink类型声明inkjs 就能在 TypeScript 项目中直接导入.ink文件并即时编译——无需预生成 JSON无需本地编译服务。这套配置正是 docs/working-with-typescript-and-webpack.md 官方指南的核心内容照着抄完即可开工 【免费下载链接】inkjsA javascript port of inkles ink scripting language.项目地址: https://gitcode.com/gh_mirrors/in/inkjs创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考