如何導入 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。