如何在 Adobe XD 插件中使用 ES6 模块？

Question

我想知道我是否可以在我的 XD 插件中使用 ES6 导入。

例如，每当我使用 import Vue from 'vue' 时，构建任务都会成功完成，但是，XD 在加载插件时会在开发人员控制台中抛出错误：

Plugin Error: Error loading plugin <settings>/develop/my_plugin
Plugin TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    at Module.<anonymous> (<settings>/develop/my_plugin/main.js:14367:16)
    at Module../src/router.js (<settings>/develop/my_plugin/main.js:14368:30)
    at __webpack_require__ (<settings>/develop/my_plugin/main.js:21:30)
    at Object../src/main.js (<settings>/develop/my_plugin/main.js:14267:16)
    at __webpack_require__ (<settings>/develop/my_plugin/main.js:21:30)
    at <settings>/develop/my_plugin/main.js:85:18
    at <settings>/develop/my_plugin/main.js:88:10
    at b.value (uxp://uxp-internal/home/ubuntu/jenkins/workspace/Torq/torq-native/release-3.3.8/build/modules_gen/js/runtime/src/js/runtime_scripts_loader.js:88:3563)
    at b.value (uxp://uxp-internal/home/ubuntu/jenkins/workspace/Torq/torq-native/release-3.3.8/build/modules_gen/js/runtime/src/js/runtime_scripts_loader.js:88:1015)
    at d.value (uxp://uxp-internal/home/ubuntu/jenkins/workspace/Torq/torq-native/release-3.3.8/build/modules_gen/pluginmanager/src/js/pluginmanager_scripts.js:95:2060)
    at convertPluginErrorToString (plugins/PluginErrorUtil.js:1:198)
    at safeGetStackTrace (plugins/PluginErrorUtil.js:1:339)
    at internalFormatPluginError (plugins/PluginErrorUtil.js:1:1073)
    at internalReportPluginError (plugins/PluginErrorUtil.js:1:1171)
    at Object.reportPluginError (plugins/PluginErrorUtil.js:1:1603)
    at loadPlugin (plugins/PluginLoader.js:1:1277)
    at plugins/PluginLoader.js:1:8993
    at Array.forEach (<anonymous>)
    at reloadPlugins (plugins/PluginLoader.js:1:8967)
    at Artwork.history.waitForCurrentEditBatch.then (plugins/PluginLoader.js:1:9642)

我从 Hello Vue 对话框示例开始 here 并将其转换为面板 - 但对话框示例出现了同样的错误。 package.json 和 webpack.config.js 在此过程中没有改变，因此 libraryTarget 仍然是 commonjs2。我需要一个额外的插件来解析 ES6 模块导入吗？

在这里的另一个线程中，没有直接提到 Adobe XD 支持 ES6 导入和导出：

由于我有一个使用 ES6 Imports 和 Exports 的流行代码库，我想将其放入插件中并在插件中使用它，而不用将每个 import 语句替换为所需的 require 语句.

如果需要，我可以提供一个最小的例子。

感谢您的帮助。

最好的，丹尼尔

Answer 1

因此修复相当简单 - 只要您知道如何编写这些导出语句即可。

在main.js文件中，替换

module.exports = {
    panels: {
        mainPanel: { show, hide, update }
      }
};

和

export const panels = {
    mainPanel: { show, hide, update }
}

根据 Twitter 上的@kerrishotts：https://twitter.com/kerrishotts/status/1249832641857114114

从那时起，您可以在整个项目中使用 import 和 export 语句。

如何在 Adobe XD 插件中使用 ES6 模块？

How to use ES6 modules within an Adobe XD plugin?

javascript

vue.js

ecmascript-6

adobe-xd

如何在 Adob​​e XD 插件中使用 ES6 模块？

How to use ES6 modules within an Adobe XD plugin?

javascript

vue.js

ecmascript-6

adobe-xd

如何在 Adobe XD 插件中使用 ES6 模块？