browserify - 相当于 "browserify -r"的汇总

Question

我需要将一些模块强制放入我的包中，因为它们是通过如下代码动态需要的:

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

我正在使用 browserify 来捆绑它(通过 browserify -r 或等效的 API)。

我正在尝试切换到 rollup，但我不知道如何使用 rollup 来做到这一点。基本上，我只是想将一些模块强制放入包中，并通过 require 语句使它们在全局范围内可用。

Answer 1

我认为这里的关键是使用 Rollup 文档中描述的新 ES6 模块语法。这也将使 Rollup 有可能应用分块和 tree-shaking 等功能。

另一件重要的事情是明确说明可能导入的内容。我的意思是使用像“import('./module1.js')”这样的语句而不是“import(some_variable)”。 Rollup 很难找出在导入中使用的变量的所有可能内容。因此，我会在这里使用明确的文件名，但将所有内容包装在某种 if/else 条件中。

考虑以下示例:

文件./src/ma​​in.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!”。

Rollup 配置如下所示:

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”。该 bundle 将包括所有三个模块。通常 Rollup 会创建 main.js 和三个 block 。通过使用设置“inlineDynamicImports=true”，Rollup 将所有内容放在一个文件中。

如果需要，您还可以将 Rollup 配置中的格式更改为“iife”(或 amd、cjs、umd)。