webpack/node 中是否有相当于文件“包含”的东西？

Question

我正在开发一个 Webpack/VueCLI 项目，该项目将为外部应用程序提供 javascript 文件。 这些文件将提供给不同的“项目”，每个项目一个文件，我希望在项目文件中包含的基本文件中有一些通用功能。

我最初认为让 webpack 的模块/导入处理这样做：

//base.js

console.log('Base functionality')

//project-a.js

import './base.js';

console.log('Project functionality');

但这并不是我想要的方式：Webpack 解析模块，将它们包装在自己的__webpack_require__功能中，等等。

我认为我真正想要的更像是老式的服务器端包含：所以 JS 加载器只是简单地导入base.js的内容并将其放入project-a.js的适当位置。

有没有办法让 webpack/node（或其他东西）做到这一点？

Answer 1

我建议稍微调整您的项目以使用 Node 的 JS 模块系统。 这涉及：

• 将公共代码组织成离散单元（函数、类、常量等）
• 给这些离散单位命名。
• 导入时请求这些名称。

以下是如何在基本文件中编写常用功能的示例：

// base.js
export const PI = 3.14

export const sqrt = Math.sqrt;

export function square(x) {
    return x * x;
}

export function circleArea(r) {
    return PI * square(r);
}

然后是如何从项目文件中访问该常用功能：

// project-a.js
import { circleArea } from './base.js';

console.log('Area of circle with radius 10 is:');
console.log(circleArea(10));

---

JS import / export语法可能会让人困惑，所以这里有一个有用的指南： ES6 Import And Export Cheatsheet

---

更新：如何为每个项目 output 捆绑：

如上所述组织代码后，根据需要将捆绑器配置为 output 每个项目文件。 他们的关键是弄清楚如何指定多个输入文件和多个 output 包。 几乎任何捆绑器都可以工作：

• 包裹JS
• WebPack
• Gulp
• Rollup.js

我建议使用 Rollup，因为它需要最少的配置，并且似乎 output 没有任何“开销”。

继续上面的例子，这个命令：

$ rollup project-a.js --file output.js    

产生这个 output：

// base.js
const PI = 3.14;

function square(x) {
    return x * x;
}

function circleArea(r) {
    return PI * square(r);
}

// project-a.js

console.log('Area of circle with radius 10 is:');
console.log(circleArea(10));

请注意，捆绑器足够聪明，可以注意到export const sqrt = Math.sqrt; 未使用并从 output 中排除此行。 这就是为什么 JS 导入语句要求您显式命名离散单元，例如import { circleArea } from './base.js'

现在，每个 JS 捆绑器都有大量的配置选项，比如缩小，但我认为这足以让你开始。