如何使用汇总导入 javascript 个模块并捆绑到单个 js 文件中?
How to import javascript modules and bundle into a single js file with rollup?
我有 javascript 个功能,我想 运行 服务器端和客户端。服务器端使用 node.js
并且可以很好地处理导入。
但是,客户端我想要一个带有内联 javascript 的单个脚本标签。为了实现这个目标,我明白我需要一个捆绑器来将模块拉入主脚本文件。我选择汇总来完成这项工作。
这是我尝试过的示例。我制作了一个模块test.js
。这是一个简单的函数,returns 一个字符串:
// 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));
不一样,结果还是没有包含测试函数
您需要将 format
更改为 iife
(Immediately Invoked Function Expression)。
您的新 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"
您可以在 official docs 中找到更多信息。
我有 javascript 个功能,我想 运行 服务器端和客户端。服务器端使用 node.js
并且可以很好地处理导入。
但是,客户端我想要一个带有内联 javascript 的单个脚本标签。为了实现这个目标,我明白我需要一个捆绑器来将模块拉入主脚本文件。我选择汇总来完成这项工作。
这是我尝试过的示例。我制作了一个模块test.js
。这是一个简单的函数,returns 一个字符串:
// 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));
不一样,结果还是没有包含测试函数
您需要将 format
更改为 iife
(Immediately Invoked Function Expression)。
您的新 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"
您可以在 official docs 中找到更多信息。