如何导入 javascript 模块并将其捆绑到带有汇总的单个 js 文件中？

Question

我有 javascript 个函数，我想同时运行服务器端和客户端。 服务器端使用node.js可以很好地处理导入。

然而，客户端我想要一个带有内联 javascript 的单个脚本标签。为了实现这个目标，我知道我需要一个捆绑器来将模块拉入主脚本文件。 我选择汇总来完成这项工作。

这是我尝试过的一个例子。 我做了一个模块test.js 。 这是一个返回字符串的简单 function：

// test.js

const test = () => {
    return 'testing'
}

module.exports = test

这是主要的 javascript 文件main.js 。 我要将test.js function 拉入的文件：

// main.js

import test from "/test.js"

console.log(test())

这是我希望main.js在捆绑后的样子：

// main.js

const test = () => {
    return 'testing'
}

console.log(test())

我只想将 function 拉入文件。

相反 rollup 产生这个：

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('../../../../../../../js/test.js')) :
    typeof define === 'function' && define.amd ? define(['../../../../../../../js/test'], factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.test));
}(this, (function (test) { 'use strict';

    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

    var test__default = /*#__PURE__*/_interopDefaultLegacy(test);

    console.log(test__default['default']());

})));

代码比以前大得多，关键是模块没有合并到主文件中。 它仍然是一个模块，但语法不同。 Rollup 有多个 output 选项，都产生类似的结果。

这是我的rollup.config.js文件：

// rollup.config.js

export default [
    {
        input: 'src/scripts/main.js',
        output: {
            name: 'main',
            file: "public/scripts/main.js",
            format: 'umd'
        }
    }
]

当然，对于了解正在发生的事情的人来说，这是预期的 output。 但我不明白。

如何在构建时将 javascript 合并到一个文件中？

有没有我忽略的更简单的解决方案？

编辑：使用commonjs模块并将 output 格式设置为iife结果如下：

// main.js

(function (test) {
    'use strict';

    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

    var test__default = /*#__PURE__*/_interopDefaultLegacy(test);

    console.log(test__default['default']());

}(test));

不一样了，结果还是不包含测试function。

Answer 1

您需要将format更改为iife （立即调用 Function 表达式）。

你的新rollup.config.js应该是这样的：

// rollup.config.js

export default [
    {
        input: 'src/scripts/main.js',
        output: {
            name: 'main',
            file: "public/scripts/main.js",
            format: 'iife'
        }
    }
]

如果您还需要使用 CommonJS 导出（ module.exports = ___而不是 ES6 export default ___ ），您需要安装@rollup/plugin-commonjs ：

$ npm install --save-dev @rollup/plugin-commonjs

并像这样使用它：

import commonjs from '@rollup/plugin-commonjs'

export default [
    {
        input: 'src/scripts/main.js',
        plugins: [commonjs()],
        output: {
            name: 'main',
            file: "public/scripts/main.js",
            format: 'iife'
        }
    }
]

在旁注中，确保您的导入路径正确。

这个：

import test from "/test.js"

应该：

import test from "./test.js"

您可以在官方文档中找到更多信息。

Answer 2

我有 javascript 功能，我想同时运行服务器端和客户端。 服务器端使用node.js并且可以很好地处理导入。

但是，客户端我想要一个带有内联 javascript 的单个脚本标签。 为了实现这个目标，我知道我需要一个捆绑器来将模块拉入主脚本文件。 我选择汇总来完成这项工作。

这是我尝试过的一个例子。 我制作了一个模块test.js 。 这是一个简单的 function 返回一个字符串：

// test.js

const test = () => {
    return 'testing'
}

module.exports = test

这是主要的 javascript 文件main.js 。 我想将test.js function 拉入的文件：

// main.js

import test from "/test.js"

console.log(test())

这是我希望main.js捆绑后的样子：

// main.js

const test = () => {
    return 'testing'
}

console.log(test())

我想简单地将 function 拉到文件中。

相反，汇总会产生：

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('../../../../../../../js/test.js')) :
    typeof define === 'function' && define.amd ? define(['../../../../../../../js/test'], factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.test));
}(this, (function (test) { 'use strict';

    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

    var test__default = /*#__PURE__*/_interopDefaultLegacy(test);

    console.log(test__default['default']());

})));

代码比以前大得多，关键是模块没有合并到主文件中。 它仍然是一个模块，但具有不同的语法。 Rollup 有许多 output 选项，都产生类似的结果。

这是我的rollup.config.js文件：

// rollup.config.js

export default [
    {
        input: 'src/scripts/main.js',
        output: {
            name: 'main',
            file: "public/scripts/main.js",
            format: 'umd'
        }
    }
]

当然，对于了解正在发生的事情的人来说，这是预期的 output。 但我不明白。

如何在构建时将 javascript 合并到一个文件中？

我忽略了一个更简单的解决方案吗？

编辑：使用commonjs模块并将 output 格式设置为iife结果如下：

// main.js

(function (test) {
    'use strict';

    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

    var test__default = /*#__PURE__*/_interopDefaultLegacy(test);

    console.log(test__default['default']());

}(test));

它有所不同，但结果仍然不包含测试 function。