2

我想知道是否可以在我的 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 对话框示例开始，并将其转换为面板 - 但对话框示例出现相同的错误。package.json 和 webpack.config.js 在这个过程中没有改变，所以libraryTarget剩下的commonjs2. 我需要额外的插件来解析 ES6 模块导入吗？

在此处的另一个线程中，没有直接提到 ES6 导入和导出受 Adob​​e XD 支持：您可以在 Adob​​e XD 插件中使用 ES2015+ 功能 (ES6) 吗？

由于我有一个使用 ES6 导入和导出的流行代码库，我想将它放入插件中并在插件中使用它，而不用import需要的语句替换每个require语句。

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

谢谢你的帮助。

最好的，丹尼尔

4

1 回答 1

3

所以修复相当容易——只要你知道如何编写这些导出语句。

在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

于 2020-04-13T23:04:31.347 回答