Question

我需要强制将某些模块放入包中，因为通过以下代码动态需要它们：

var moduleName = "someModule";
var myModule = require(moduleName);

我当时正在使用browserify将其捆绑（通过browserify -r或等效的API）。

我正在尝试切换到汇总，但我不知道如何使用汇总来做到这一点。基本上，我只想将某些模块放入捆绑包中，并通过require语句使它们全局可用。

Answer 1

我认为这里的关键是使用汇总文档中所述的新ES6模块语法。这也将使Rollup可以应用分块和摇树等功能。

另一个重要的事情是要明确指出可能要导入的内容。我的意思是使用诸如'import（'./ module1.js'）'之类的语句，而不是'import（some_variable）'。 Rollup很难找出在导入中使用的变量的所有可能内容。因此，我将在此处使用显式文件名，但将所有内容包装在某种if / else条件下。

考虑以下示例：

文件./src/main.js：

let num = Math.random() * 10;
let condition = Math.round(num % 3);

let mod;

if (condition === 1) {
  import('./module1.js').then((module)=> {
    log(module);
  });
} else if (condition === 2) {
  import('./module2.js').then((module)=> {
    log(module);
  });
} else {
  import('./module3.js').then((module)=> {
    log(module);
  });
}

function log(module) {
  mod = module;
  console.log(mod.test());
  console.log('Done');
}

文件./src/module1.js：

function test() {
  return 'This is 1!';
}

export { test };

文件 module2.js 和 module3.js 与module1相同。唯一的区别是他们记录了“这是2！”。和“这是3！”。

汇总配置如下：

const production = !process.env.ROLLUP_WATCH;

export default {
  inlineDynamicImports: true,
  input: 'src/main.js',
  output: {
    dir: 'public/',
    format: 'esm',
    sourcemap: true
  }
};

如果您运行'rollup -c'，则将有一个文件'./public/main.js'。该捆绑软件将包括所有三个模块。通常，汇总会创建main.js和三个块。通过使用设置'inlineDynamicImports = true'，汇总功能将所有内容都放入一个文件中。

如果愿意，还可以将汇总配置中的格式更改为“ iife”（或amd，cjs，umd）。

等效于“ browserify -r”的汇总

1 个答案: