我如何通过@NAmdConfig 为客户端脚本使用相对模块路径？套件脚本 2.0

Question

我想为客户端脚本使用@NAmdConfig 加载非 AMD 模块（jQuery 和 blockUI），但我的代码在浏览器中出现错误。

Uncaught Error: Module does not exist: ../../lib/jquery-blockUI.js

如果我使用绝对路径而不是相对路径，它会起作用。

"baseUrl": "../../lib/"

将上面替换为下面，然后工作。

"baseUrl": "/SuiteScripts/ComponentA/SuiteScript2/lib/"

但是我想使用相对路径，因为这些脚本将作为一个包发布。

我目前针对此问题的解决方案是使用绝对路径，并在发布包时将路径替换为包路径。

有谁知道如何使用相对路径或更好的解决方案？

脚本文件

文件结构

SuiteScripts/
└── ComponentA/
    └── SuiteScript2/
        ├── FunctionA/
        │   ├ config.json
        │   ├ Suitelet.js
        │   └ ClientScript.js
        └── lib/
            ├ jquery.min.js
            └ jquery-blockUI.js

config.json

{
  "baseUrl": "../../lib/",
  "paths": {
    "jquery": "jquery.min.js",
    "blockUI": "jquery-blockUI.js"
  },
  "shim": {
    "blockUI": ["jquery"]
  }
}

Suitelet.js

/**
 * @NApiVersion 2.x
 * @NScriptType Suitelet
 * @NModuleScope SameAccount
 * @NAmdConfig ./config.json
 */

define(['N/record', 'N/url', 'N/ui/serverWidget'],
function(record, nsUrl, serverWidget) {

    function onRequest(context) {
        // code abbreviated
        var form = serverWidget.createForm({title: 'FunctionA', hideNavBar: false});
        // Set client script
        form.clientScriptModulePath = './ClientScript.js';
        // code abbreviated
    }
})

ClientScript.js

/**
 * @NApiVersion 2.x
 * @NScriptType ClientScript
 * @NModuleScope SameAccount
 * @NAmdConfig ./config.json
 */
define(['N/runtime', 'N/url', 'blockUI'],
    function (runtime, url, blockUI) {
    // code using blockUI
});

Answer 1

像这样。一开始它很棘手，但一旦你学会了：

AMD 配置文件（/SuiteScripts/MyLibs/MyLibs.config.json）：

{
  "packages": [
  ],
  "paths": {
    "sugar-2.0.4.min": "SuiteScripts/MyLibs/libs/sugar-2.0.4.min",
    "buckets-1.98.2.min": "SuiteScripts/MyLibs/libs/buckets-1.98.2.min",
    "jquery.jexcel-1.5.7": "SuiteScripts/MyLibs/libs/jquery.jexcel-1.5.7",
    "jquery.jcalendar-1.5.7": "SuiteScripts/MyLibs/libs/jquery.jcalendar-1.5.7"
  }
}

以及客户端脚本中的用法

 *@NApiVersion 2.x
 *@NScriptType ClientScript
 *@NAmdConfig  /SuiteScripts/MyLibs/MyLibs.config.json
 */
define([
        'N/error',
        'N/search',
        'sugar-2.0.4.min',
        'buckets-1.98.2.min',
        'jquery.jexcel-1.5.7',
        'jquery.jcalendar-1.5.7',
    ],
    function (error, search, sugar, buckets, jexcel, jcalendar) {

       function pageInit(context) {
            // example 1 w/ sugar.js
            var num = Sugar.Number.random(1, 100);
            var hm = new buckets.Dictionary();

            // example 2 w/ jquery grid
            jQuery('#ui-grid').jexcel({
                    data: data,
                    colHeaders: ['Country', 'Description', 'Type', 'Stock', 'Next purchase'],
                    colWidths: [300, 80, 100, 60, 120],
                    columns: [
                        {type: 'autocomplete', url: 'https://bossanova.uk/jexcel/countries'},
                        {type: 'text'},
                        {
                            type: 'dropdown',
                            source: [{'id': '1', 'name': 'Fruits'}, {'id': '2', 'name': 'Legumes'}, {
                                'id': '3',
                                'name': 'General Food'
                            }]
                        },
                        {type: 'checkbox'},
                        {type: 'calendar'},
                    ]
                });

...

Answer 2

我找到了解决此问题的方法，尽管它不使用相对路径。 jajo1987 在 Reddit 上告诉我这个技巧，感谢 jajo1987。 Reddit

解决方法是在开发环境的 /SuiteBundles/ 文件夹下复制 config.json。

有了这个技巧，我在发布包时就不必替换配置文件中的路径了。

脚本文件

假设捆绑包编号为 00000。

文件结构

├── SuiteScripts/
│   └── ComponentA/
│       └── SuiteScript2/
│           ├── FunctionA/
│           │   ├ config.json
│           │   ├ Suitelet.js
│           │   └ ClientScript.js
│           └── lib/
│               ├ jquery.min.js
│               └ jquery-blockUI.js
└── SuiteBundles/
    └── Bundle 00000/
        └── SuiteScript2/
            └── FunctionA/
                └ config.json

/SuiteScripts/ComponentA/SuiteScript2/FunctionA/config.json

{
  "baseUrl": "/SuiteBundles/Bundle 00000/SuiteScript2/lib/",
  "paths": {
    "jquery": "jquery.min.js",
    "blockUI": "jquery-blockUI.js"
  },
  "shim": {
    "blockUI": ["jquery"]
  }
}

/SuiteBundles/Bundle 00000/SuiteScript2/FunctionA/config.json

{
  "baseUrl": "/SuiteScripts/ComponentA/SuiteScript2/lib/",
  "paths": {
    "jquery": "jquery.min.js",
    "blockUI": "jquery-blockUI.js"
  },
  "shim": {
    "blockUI": ["jquery"]
  }
}

ClientScript.js

/**
 * @NApiVersion 2.x
 * @NScriptType ClientScript
 * @NModuleScope SameAccount
 * @NAmdConfig /SuiteBundles/ComponentA/SuiteScript2/FunctionA/config.json
 */
define(['N/runtime', 'N/url', 'blockUI'],
    function (runtime, url, blockUI) {
    // code using blockUI
});

我如何通过@NAmdConfig 为客户端脚本使用相对模块路径？套件脚本 2.0

How can I use relative module path for client script by @NAmdConfig? SuiteScript 2.0

suitescript2.0

脚本文件

脚本文件