仅使用 Browserify 导入部分文件

Question

我正在使用 Browserify 将 ES6 转换为 ES5，我对 Browserify 如何包含导入文件的全部内容 感到不满意，而我只请求该文件中的一个方法.简单示例：

File1.js

export const firstThing = () => { console.log('I do nothing'); };
export const secondThing = () => { console.log('I do nothing as well'); };

File2.js

import { firstThing } from '/File1';

firstThing();

File2.js 转译为 ES5 之后

var firstThing = function firstThing(){
    console.log('I do nothing');
};

var secondThing = function secondThing(){
    console.log('I do nothing as well');
};

firstThing();

注意 Browserify 如何将 File1.js 的全部内容转储到 File2.js 中，即使我只从该文件导入了一个方法。这在小文件中可能不会产生太大差异，但会在整个代码库中产生巨大差异（大量不必要的代码会使文件大小膨胀）。

我的 Gulp 文件中的相关 Browserify 代码：

browserify(file)
  .transform(babelify, {
    presets: ['env'],
  })
  .bundle((err, res) => {
    if (err) return next(chalk.red(err));
    file.contents = res;
    return next(null, file);
  });

有没有办法防止 Browserify 在转译过程中包含未专门导入文件的代码？

Answer 1

这不是 Browserify 的工作。从文件导入单个函数仍会加载整个文件。你可以考虑在 browserify 之后使用运行来查找未使用的代码，然后将其删除。例如 UglifyJS 有删除死代码的选项。

仅使用 Browserify 导入部分文件

Only import part of file with Browserify

javascript

browserify

babeljs