如何通过rollup将javascript模块和bundle导入到单个js文件中

Question

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

然而，在客户端，我想要一个带有内联javascript的单个脚本标记。为了实现这个目标，我知道我需要一个bundler来将模块拉入主脚本文件。我选择了rollup来做那项工作。

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

// test.js
const test = () => {
return 'testing'
}
module.exports = test

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

// main.js
import test from "/test.js"
console.log(test())

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

// main.js
const test = () => {
return 'testing'
}
console.log(test())

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

相反，汇总会产生以下结果：

(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有许多输出选项，所有选项都会产生类似的结果。

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

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

当然，这是一个了解情况的人所期望的结果。但我不明白。

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

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

编辑：使用commonjs模块并将输出格式设置为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));

虽然有所不同，但结果仍然不包含测试函数。

Answer 1

您需要将format更改为iife(立即调用函数表达式(。

你的新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 = ___而不是ES6export 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"

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