[英]How to import javascript modules and bundle into a single js file with rollup?
I have javascript functions I want to run both server-side and client side.我有 javascript 个函数,我想同时运行服务器端和客户端。 The server side uses node.js
and can handle imports just fine.服务器端使用node.js
可以很好地处理导入。
However, the client side i want a single script tag with inlined javascript. To achieve that goal I understood that I needed a bundler to pull the modules into the main script file.然而,客户端我想要一个带有内联 javascript 的单个脚本标签。为了实现这个目标,我知道我需要一个捆绑器来将模块拉入主脚本文件。 I chose rollup to do that job.我选择汇总来完成这项工作。
Here's an example of what I've tried.这是我尝试过的一个例子。 I've made a module test.js
.我做了一个模块test.js
。 it's a simple function that returns a string:这是一个返回字符串的简单 function:
// test.js
const test = () => {
return 'testing'
}
module.exports = test
and here's the main javascript file, main.js
.这是主要的 javascript 文件main.js
。 The file I want to pull the test.js
function into:我要将test.js
function 拉入的文件:
// main.js
import test from "/test.js"
console.log(test())
Here's what i'd like main.js
to look like after bundling:这是我希望main.js
在捆绑后的样子:
// main.js
const test = () => {
return 'testing'
}
console.log(test())
I'd like to simply pull the function into the file.我只想将 function 拉入文件。
Instead rollup produces this:相反 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']());
})));
The code is much larger than before, and crucially the module isn't incorporated into the main file.代码比以前大得多,关键是模块没有合并到主文件中。 It's still a module, but with different syntax.它仍然是一个模块,但语法不同。 Rollup has a number of output options, all produce similar results. Rollup 有多个 output 选项,都产生类似的结果。
Here's my rollup.config.js
file:这是我的rollup.config.js
文件:
// rollup.config.js
export default [
{
input: 'src/scripts/main.js',
output: {
name: 'main',
file: "public/scripts/main.js",
format: 'umd'
}
}
]
Of course, this is the expected output for somebody who understands what's going on.当然,对于了解正在发生的事情的人来说,这是预期的 output。 But I don't understand.但我不明白。
How do I merge a javascript into one file at build time?如何在构建时将 javascript 合并到一个文件中?
is there a simpler solution I'm overlooking?有没有我忽略的更简单的解决方案?
Edit: Using the commonjs
module and setting the output format to iife
results in the following:编辑:使用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));
It's different, but the result still doesn't contain the test function.不一样了,结果还是不包含测试function。
You'll want to change the format
to iife
( Immediately Invoked Function Expression ).您需要将format
更改为iife
(立即调用 Function 表达式)。
Your new rollup.config.js
should look like this:你的新rollup.config.js
应该是这样的:
// rollup.config.js
export default [
{
input: 'src/scripts/main.js',
output: {
name: 'main',
file: "public/scripts/main.js",
format: 'iife'
}
}
]
If you also need to use CommonJS exports ( module.exports = ___
instead of ES6 export default ___
) you'll need to install@rollup/plugin-commonjs :如果您还需要使用 CommonJS 导出( module.exports = ___
而不是 ES6 export default ___
),您需要安装@rollup/plugin-commonjs :
$ npm install --save-dev @rollup/plugin-commonjs
And use it like so:并像这样使用它:
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'
}
}
]
On a side note, make sure your import paths are correct.在旁注中,确保您的导入路径正确。
This:这个:
import test from "/test.js"
Should be:应该:
import test from "./test.js"
You can find more info in the official docs .您可以在官方文档中找到更多信息。
I have javascript functions I want to run both server-side and client side.我有 javascript 功能,我想同时运行服务器端和客户端。 The server side uses node.js
and can handle imports just fine.服务器端使用node.js
并且可以很好地处理导入。
However, the client side i want a single script tag with inlined javascript.但是,客户端我想要一个带有内联 javascript 的单个脚本标签。 To achieve that goal I understood that I needed a bundler to pull the modules into the main script file.为了实现这个目标,我知道我需要一个捆绑器来将模块拉入主脚本文件。 I chose rollup to do that job.我选择汇总来完成这项工作。
Here's an example of what I've tried.这是我尝试过的一个例子。 I've made a module test.js
.我制作了一个模块test.js
。 it's a simple function that returns a string:这是一个简单的 function 返回一个字符串:
// test.js
const test = () => {
return 'testing'
}
module.exports = test
and here's the main javascript file, main.js
.这是主要的 javascript 文件main.js
。 The file I want to pull the test.js
function into:我想将test.js
function 拉入的文件:
// main.js
import test from "/test.js"
console.log(test())
Here's what i'd like main.js
to look like after bundling:这是我希望main.js
捆绑后的样子:
// main.js
const test = () => {
return 'testing'
}
console.log(test())
I'd like to simply pull the function into the file.我想简单地将 function 拉到文件中。
Instead rollup produces this:相反,汇总会产生:
(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']());
})));
The code is much larger than before, and crucially the module isn't incorporated into the main file.代码比以前大得多,关键是模块没有合并到主文件中。 It's still a module, but with different syntax.它仍然是一个模块,但具有不同的语法。 Rollup has a number of output options, all produce similar results. Rollup 有许多 output 选项,都产生类似的结果。
Here's my rollup.config.js
file:这是我的rollup.config.js
文件:
// rollup.config.js
export default [
{
input: 'src/scripts/main.js',
output: {
name: 'main',
file: "public/scripts/main.js",
format: 'umd'
}
}
]
Of course, this is the expected output for somebody who understands what's going on.当然,对于了解正在发生的事情的人来说,这是预期的 output。 But I don't understand.但我不明白。
How do I merge a javascript into one file at build time?如何在构建时将 javascript 合并到一个文件中?
is there a simpler solution I'm overlooking?我忽略了一个更简单的解决方案吗?
Edit: Using the commonjs
module and setting the output format to iife
results in the following:编辑:使用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));
It's different, but the result still doesn't contain the test function.它有所不同,但结果仍然不包含测试 function。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.