Question

我正在尝试使汇总，commonjs，es6和树摇动正常工作。

目前，我有以下构建脚本：

'use strict';

const rollup = require('rollup');
const resolve = require('rollup-plugin-node-resolve');
const commonjs = require('rollup-plugin-commonjs');

rollup.rollup({
  input: 'main.js',
  format: 'iife',
  plugins: [
    {
      transform(code, id) {
        return code;
      }
    },
    resolve({
      extensions: ['.js', '.jsx']
    }),
    commonjs({
      extensions: ['.js', '.jsx']
    })
  ]
})
.then(({ generate }) => generate({
  format: 'iife',
  name: 'test',
}))
.then(({ code }) => console.log(code));

加载以下main.js文件

const { firstFunction } = require('./exports');

firstFunction();

和export.js文件

export function firstFunction() {
  return this.name;
}

export function secondFunction() {
  return this.name;
}

输出以下内容：

var test = (function () {
'use strict';

function firstFunction$1() {
  return this.name;
}

function secondFunction() {
  return this.name;
}


var exports$1 = Object.freeze({
    firstFunction: firstFunction$1,
    secondFunction: secondFunction
});

var require$$0 = ( exports$1 && undefined ) || exports$1;

const { firstFunction } = require$$0;

firstFunction();

var main = {

};

return main;

}());

我不确定这是否是正确的行为，我假设我可以使用es6 export.js文件进行树抖动，因此无需从{{{{}}导入secondFunction() 1}}在我们的捆绑代码中。

我尝试过多种设置组合，但似乎没有任何东西可以让树木震动起作用。

值得注意的是我在服务器上使用commonjs并尝试使用客户端上捆绑的相同文件 - 这就是为什么我混合了cjs和es6。

Answer 1

Lux在评论中指出，问题是你在混合cjs和ES模块。似乎require没有树木进口。

您应首先使用汇总捆绑文件，并使用cjs作为输出格式。然后你{{1}}捆绑。

那应该让你的javascript treehaken并为节点做好准备。

使用CommonJS进行汇总，使用treeshaking导入和导出

1 个答案: