无法使用带有 Vue.js 的 Javascript 解释器导入 Ink 解释器答案

【问题标题】：Can't import Ink interpreter with Javascript interpreter with Vue.js无法使用带有 Vue.js 的 Javascript 解释器导入 Ink 解释器
【发布时间】：2021-05-03 16:19:05
【问题描述】：

我需要使用 JavaScript Ink 解释器创建一个 Vue.js 站点。似乎可以生产的唯一一个是Ink.js。有两种方法可以导入它。一种是 TypeScript 格式，但我的 Vue 设置不使用 TypeScript。我可以添加它，也许，虽然我不确定我是否想要。如果我从 Yarn 导入 TypeScript 库，无论我导入哪个对象，它都会在我的代码中显示为 undefined 的值。

然后there is a pure es5 script available，这似乎是第一个的转译版本，但是当我尝试导入那个时，我收到了这个错误，我认为来自 Babel：

Uncaught SyntaxError: Unexpected token '!'
    cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Ink.vue?vue&type=script&lang=js&:39 Uncaught SyntaxError: Unexpected token '!'
at Object../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Ink.vue?vue&type=script&lang=js& (app.js:962)

我的猜测是 Babel 是为 es6 或 es7 设置的，而纯 is5 文件带来了一些意想不到的语法。我试图更改babel.config.js，但我没有找到让 Vue.js 不抱怨的选项。我究竟做错了什么？

【问题讨论】：

标签： vue.js babeljs ecmascript-5

【解决方案1】：

在多次尝试失败后，我通过以下方式解决了这个问题：我直接从库中导入了Story 对象：

import { Story } from '../../node_modules/inkjs/engine/Story';
// ...
let story = new Story(storyText);

我知道这不是文档所推荐的，但它确实有效。似乎需要导入的其他所有内容都是，因为当我尝试读取 story.currentChoices 时，我得到一组 Choice 对象，而这些对象又完全可读。

所以这对我有用。如果其他人遇到这个问题，我并不是说这是正确的解决方案，我只是说这就是我最终做的。

【讨论】：