“browserify -r”的汇总相当于

Question

我需要一些模块强行进入我的包，因为它们是通过像下面的一些代码动态要求：

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

我用browserify捆绑此（通过browserify -r或API当量）。

我想切换到汇总，我不知道如何与汇总做到这一点。基本上，我只是想一些模块强行进入束，并使它们在全球范围可以通过require声明。

Answer 1

我认为，这里的关键是汇总文档中描述使用新ES6模块语法。这也给汇总申请像分块和树摇功能的可能性。

另一个重要的事情是，清楚什么可能会进口。我的意思是使用的语句，如“进口（” ./ module1.js“）”而不是“进口（some_variable）”。这是很难的汇总找出它获取的进口中使用的变量的所有可能的内容。因此，我将在这里使用明确的文件名，但在某种的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都同样喜欢模块1。唯一的区别是，他们的日志“这是2！和“这是3！”。

该汇总的配置是这样的：

const production = !process.env.ROLLUP_WATCH;

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

如果你运行“汇总-c”，那么就会有一个文件” ./public/main.js'。该软件包将包括所有三个模块。通常汇总会造成main.js三个大块。通过设置“inlineDynamicImports =真”，汇总把一切都在一个文件中。

您也可以更改格式的汇总配置为“iife”（或AMD，CJS，UMD）如果你想。