如何配置Webpack生成兼容SuiteScript的模块？

问题背景 #

我尝试用Webpack将依赖库打包到TypeScript Suitelet中，但NetSuite要求SuiteScript必须遵循特定的AMD模块模式：

• tsc编译后的代码符合规范，可被NetSuite正常识别
• Webpack打包后的代码不符合要求，无法通过NetSuite的校验

tsc编译的合规代码示例 #

/**
 *
 * @NApiVersion 2.x
 * @NScriptType Suitelet
 */
define(["require", "exports", "N", "N/file"], function (require, exports, N_1, file_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.onRequest = void 0;
    var onRequest = function (context) {
        //my actual code here
    };
    exports.onRequest = onRequest;
});

Webpack打包的不合规代码示例 #

/**
 *
 * @NApiVersion 2.x
 * @NScriptType Suitelet
 */
define(["N", "N/file"], (__WEBPACK_EXTERNAL_MODULE__N, __WEBPACK_EXTERNAL_MODULE__Nfile) => {
    return (() => {
        //... some webpack internals goes here
        var __webpack_exports__ = {};
        // This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
        (() => {
            __webpack_require__.r(__webpack_exports__);
            /* harmony export */
            __webpack_require__.d(__webpack_exports__, {
                /* harmony export */   "onRequest": () => (/* binding */ onRequest)
                // harmony imports goes here, cut for readability
            });

            var onRequest = function onRequest(context) {
                //my actual code here
            };
        })();
        return __webpack_exports__;
    })();
});

问题核心：NetSuite期望AMD工厂函数接收require和exports参数，并通过修改exports对象完成内容导出；但Webpack默认会省略这两个参数，且用IIFE封装模块后返回独立对象，导致NetSuite无法识别导出内容。

当前Webpack配置片段 #

module.exports = {
    entry: glob.sync('.src/**.ts').reduce((obj, el) => {
        obj[path.parse(el).name] = el;
        return obj;
    }, {}),
    output: {
        filename: '[name].js',
        libraryTarget: 'amd',
        path: path.resolve(__dirname, 'dist'),
        globalObject: 'this',
    },
    resolve: {
        extensions: ['.ts', '.js'],
        modules: [
            path.resolve(__dirname, 'node_modules'),
            'node_modules'
        ]
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'babel-loader',
            },
        ],
    },
    optimization: {
        // Do not remove the SuiteScript JSDoc when minifying
        minimize: false,
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    output: {
                        comments: /@NApiVersion/i,
                    },
                },
            }),
        ],
    },
    plugins: [
        // Copy the SuiteScript JSDoc to the top of the script
        new webpack.BannerPlugin({
            banner: data => {
                const filename = data.chunk.entryModule.resource;
                const contents = fs.readFileSync(filename, 'UTF-8');
                const comments = contents.match(/\/\*[\s\S]*?\*\//);
                return comments.length ? comments[0] : '';
            },
            raw: true,
        }),
    ],
    externals: [/^N\//, /^N$/],
    externalsType: 'umd'
};

解决方案 #

通过调整Webpack配置，让输出代码完全匹配NetSuite要求的AMD模式，具体修改点如下：

1. 强制注入require和exports依赖 #

Webpack默认会省略AMD标准的require和exports依赖，需通过output.amd配置强制添加到依赖列表：

output: {
    filename: '[name].js',
    libraryTarget: 'amd',
    path: path.resolve(__dirname, 'dist'),
    globalObject: 'this',
    // 强制在AMD依赖中包含require和exports
    amd: {
        require: 'require',
        exports: 'exports'
    }
},

2. 修改外部依赖类型为amd #

当前externalsType: 'umd'不符合NetSuite的AMD规范，改为：

externalsType: 'amd'

3. 替换babel-loader为ts-loader #

使用ts-loader更贴合TypeScript到AMD的编译逻辑，避免babel-loader的额外转换干扰：

module: {
    rules: [
        {
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/
        }
    ]
},

4. 调整TypeScript编译配置 #

确保tsconfig.json的模块设置与Webpack对齐：

{
    "compilerOptions": {
        "module": "amd",
        "target": "ES5",
        "moduleResolution": "node",
        "esModuleInterop": true
    }
}

修改后的完整Webpack配置示例 #

const path = require('path');
const glob = require('glob');
const webpack = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');
const fs = require('fs');

module.exports = {
    entry: glob.sync('./src/**/*.ts').reduce((obj, el) => {
        obj[path.parse(el).name] = el;
        return obj;
    }, {}),
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
        globalObject: 'this',
        libraryTarget: 'amd',
        amd: {
            require: 'require',
            exports: 'exports'
        }
    },
    resolve: {
        extensions: ['.ts', '.js'],
        modules: [
            path.resolve(__dirname, 'node_modules'),
            'node_modules'
        ]
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    optimization: {
        minimize: false,
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    output: {
                        comments: /@NApiVersion/i,
                    },
                },
            }),
        ],
    },
    plugins: [
        new webpack.BannerPlugin({
            banner: data => {
                const filename = data.chunk.entryModule.resource;
                const contents = fs.readFileSync(filename, 'UTF-8');
                const comments = contents.match(/\/\*[\s\S]*?\*\//);
                return comments ? comments[0] : '';
            },
            raw: true,
        })
    ],
    externals: [/^N\//, /^N$/],
    externalsType: 'amd'
};

关键说明 #

• 通过output.amd配置，让Webpack生成的define函数参数与tsc完全一致
• 外部依赖类型改为amd，确保NetSuite能正确识别N/开头的系统模块
• 使用ts-loader保证TypeScript编译逻辑与AMD规范的一致性
• 保留BannerPlugin确保SuiteScript的JSDoc注释不被丢失

内容的提问来源于stack exchange，提问作者SWilk