只导入你需要的？

Question

我最近参加了一次聚会，其中一次会谈是关于如何使用 Webpack 来仅请求您需要的包的一部分。我相信这被称为摇树。我想知道没有 Webpack 是否有办法做到这一点？例如，您能否准确指定所需的代码片段而不是整个节点模块。

任何关于此的信息都会很棒。我只是想学习一些新东西。

干杯，

Answer 1

有几个非常简单的方法：

在ES6中，你可以做所谓的destructuring。

这是一个数组示例：

var a, b, rest;
[a, b] = [10, 20];

console.log(a);
// expected output: 10

console.log(b);
// expected output: 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);
// expected output: [30,40,50]

这是按索引解构，其中 a = array[0]，b=索引 1 的数组（超链接禁止括号格式）等...注意 ... 运算符，在中称为展开运算符ES6。 Here is a link to that if you are curious about what it does, or how to use it.

您也可以对对象执行相同的操作，请考虑：

const someRandomObject = {
     a: 1,
     b: 2,
};

const {a} = someRandomObject;
console.log(a) // expected output: 1

根据名称，您只是从对象中破坏了您需要的属性，因此您没有引入一堆未使用的东西。如果你不使用 ES6，你可以做类似的事情：

const someRandomObject = {
     a: 1,
     b: 2,
};

const a = someRandomObject.b;
console.log(a) // expected output: 2

和上面一样，你从 someRandomObject 中取出你想要的属性，没有别的。注意上面的方式是拉取右边的值，所以变量名无所谓。这两种方式在功能上是等价的（我相信）。

只导入你需要的？

Importing only what you need?

node.js

webpack

yarnpkg