Is there way to include other JavaScript source?

Photoshop UXP Plugin API
1

As my understanding, UXP plugin needs to be single target application.

So if I had single CEP plugin to support 4 application, I need to convert to 4 separate UXP plugin.

To do that, I’d like to have common library JavaScript and include from main plugin code.

We could this in CEP, but can we do in UXP (include other JavaScript file)?
Or any other recommended way to manage external libraries?

As I searched around, I could not find sample or document.

CEP / JavaScript (index.html)

<head>
    <script src="js/CSInterface.js"></script>
    <script src="js/libA.js"></script>
    <script src="js/libB.js"></script>
    <script src="js/libC.js"></script>
    <script src="js/main.js"></script>
</head>

CEP / ExtendScript

$.evalFile("" + (File($.fileName).path) + "/libA.jsx");
$.evalFile("" + (File($.fileName).path) + "/libB.jsx");
$.evalFile("" + (File($.fileName).path) + "/libC.jsx");
2

should work fine. I am using more than 10 files in my uxp plugin.

2 Likes
3

@assitburn
Thank you very much.
It works fine.

I should check before posting.
I was trying do UI-less plugin (without HTML file), so I think I forgot to test this format.

Thank you very much,
Naoki

1 Like
4

You can also use require("relative/path/to/your/code.js") if you want to use pure JS.

Or use a bundler like webpack – you can build a bespoke tooling process that will help automate your build process & let you use import as well.

2 Likes
5

@kerrishotts Thank you very much for the tips.

Yes, pure JavaScript is preferred in our case for planning to switch to UI-less plugin.

6

@kerrishotts

Is the format supposed to work on Ps 22.4.3?
Or newer version feature?

The format seems not working in following 2 cases:

Case 1:
require("commonLib.js");

causes following error:

uxp://uxp-internal/runtime_scripts_loader.js:1 Uncaught Error: Module not found: “commonLib.js”. Parent module folder was: “./”.

Case 2:

require("./commonLib.js");

does not cause error, but defined class is not available:

index.js:51 Uncaught ReferenceError: commonClass is not defined

7

Do you export your commonClass in the commonLib.js?

2 Likes
8

Note that if you’re not using webpack, you’ll need to use relative paths. The require function does not do node-style resolution or lookup.

As such:

  • require("module.js") will fail because it’s not relative. Using require("./module.js") will work, assuming it’s in the same directory.
  • If you’ve got node_modules/commonLib.js, you’ll need to use require("./node_modules/commonLib.js") (assuming main.js is i

Be sure to also use module.exports = {/*...*/} when doing this (ES6-style exports are not supported using this mechanism.)

If you want to use ES6 modules or have node-style resolution, a bundler is a requirement.

2 Likes
9

@Karmalakas @kerrishotts
Thank you very much for explanation.

So it is a little different from before and need to use module.exports.
There’s some global variable and many non-member functions.

So I probably leave as is (included in HTML) for now and re-evaluate later with obfuscator usage.

Thank you,
Naoki