跳转到主文档

source.include

适用的工程方案

MWA。

  • 类型: Array<string | RegExp>
  • 默认值: []

默认情况下,Modern.js 不会通过 babel-loaderts-loader 来编译 node_modules 下的文件。

通过 source.include 配置项,可以指定需要额外进行编译的目录或模块。

用法介绍

source.include 的用法与 webpack 中的 Rule.include 用法一致,支持传入字符串或正则表达式来匹配模块的路径。

modern.config.js
import path from 'path';

export default defineConfig({
source: {
include: [
// 匹配以 `app/styles` 开头的模块路径。
// 比如 `app/styles.css`, `app/styles/styles.css`, `app/stylesheet.css`
path.resolve(__dirname, 'app/styles'),
// 通常会添加一个额外的 `/` 号,从而精确匹配到目录的内容。
path.join(__dirname, 'vendor/styles/'),
// 通过正则来匹配某个目录,路径分隔符需要写成 `\/`
/foo\/bar\//,
],
},
});

编译 node_modules

当项目中使用了只提供 ES6+ 语法代码的第三方依赖时,可能导致在低版本浏览器上无法运行。可以通过该选项指定需要编译的依赖来解决此问题。

query-string 为例,可通过该选项指定 query-string 包:

modern.config.js
export default defineConfig({
source: {
include: [
// 通过 require.resolve 来获取模块的路径
require.resolve('query-string'),
// 也可以通过正则表达式进行匹配
/\/query-string\//,
],
},
});

Monorepo 场景

使用 Monorepo 时,对于 Monorepo 内部的组件库,也可以直接在应用编译的过程中处理这些库的源代码,只需要在这个选项中设置对应的包名即可:

modern.config.js
export default defineConfig({
source: {
// 设置编译 Monorepo 下的 package
include: [require.resolve('@custom/package-name')],
},
});