webpack/node中是否有等同于文件'include'的东西？

Question

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

我最初认为让 webpack 的 module/import 处理这样做：

//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

更新：如何为每个项目输出一个包：

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

我建议使用 Rollup，因为它需要最少的配置，并且似乎可以输出您想要的内容而没有任何“开销”。

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

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

产生这个输出：

// 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; 未被使用，并将此行从输出中排除。这就是为什么 JS import 语句要求您显式命名离散单位，例如 import { circleArea } from './base.js'

现在，每个 JS 打包器都有大量 configuration options 之类的缩小，但我认为这足以让您入门。

webpack/node中是否有等同于文件'include'的东西？

Is there something equivalent to a file 'include' in webpack/node?

javascript

node.js

webpack

include