自定义“import”与 webpack 的工作方式

Question

我需要自定义 webpack 在我的应用中处理导入的方式。

我的一些服务有模拟实现。 在测试模式下，如果服务旁边存在带有“.mock”后缀的文件，我想导入模拟文件而不是真实服务，否则导入服务本身。

请注意，我需要不同的输出文件（“main.js”和“test.js”）。所以我需要确保 test.js 不包含真正的服务实现（阻止执行是不够的，根本不应该导入源）。

Services 文件夹包含以下文件：

service-1.js
service-1.mock.js
service-2.js
index.js

服务/index.js：

import service1 from ‘./service-1’
import service2 from ‘./service-2’
export {service1, service2}

请告诉我如何配置我的 webpack。

Answer 1

根据 cmets，我可以使用自定义加载器建议这些解决方法：

方法#1

在主文件中为每个组件创建一个 .mobile 和 .desktop（例如：component.js、component.mobile.js、component.desktop.js）并使用此自定义加载器：

const targets = {
  desktop: 'desktop',
  mobile: 'mobile'
};
const source = `
    import Home from './components/home';
    import About from './components/about';
    import Header from './shared/Header';
    import Footer from './shared/about';
    import Categories from './category/categories';
    
    // rest of code
`;

const manipulated = manipulateSource(source, targets.mobile, ['components', 'shared']);
console.log(manipulated);


function manipulateSource(src, target = targets.desktop, pathMatches = []) {
  const paths = pathMatches.length ? `(${pathMatches.join('|')})` : '';
  const pattern = new RegExp(`(?<left>.*import.*${paths}.*\\\/)(?<name>[\\w\\-_]*)(?<rest>.*\\n)`, 'g');
  const manipulated = src.replace(pattern, (...args) => {
    const [{
      left,
      name,
      rest
    }] = args.slice(-1);
    return `${left}${name}.${target}${rest}`;
  });

  return manipulated;
}

---

方法#2

对于那些对.mobile 和.desktop 有不同实现的文件，创建第三个文件（或第四个，以防您想将可共享代码放在主文件中）具有相同的名称和有意义的扩展名（例如：component.platformAdaptive.js）可以使用regular expresion（或任何其他操作方式）处理。在这种方法中，您可能需要将基本实现放在最后一个文件中，以防您使用strongTypes（例如：Typescript）：

const targets = {
  desktop: 'desktop',
  mobile: 'mobile'
};
const source = `
    import Home from './components/home';
    import About from './components/about';
    import Header from './shared/Header.platformAdaptive';
    import Footer from './shared/about.platformAdaptive';
    import Categories from './category/categories.platformAdaptive';
    
    // rest of code
`;

const manipulatedMob = manipulateSource(source, 'platformAdaptive', targets.mobile);
const manipulatedDesk = manipulateSource(source, 'platformAdaptive');

console.log(manipulatedMob);
console.log(manipulatedDesk);

function manipulateSource(src, replace, target = targets.desktop) {
  const pattern = new RegExp(`(?<left>.*\\\/)(?<name>[\\w\\-_]*\.)${replace}(?<rest>.*\\n)`, 'g');
  const manipulated = src.replace(pattern, (...args) => {
    const [{
      left,
      name,
      rest
    }] = args.slice(-1);
    return `${left}${name}${target}${rest}`;
  });

  return manipulated;
}

上述两种方法在导入方面都有一些限制，例如您不能使用Barrel files (index.js)，因为它们假定导入的最后一块是组件文件。 在这种情况下，您可以使用 barrel 添加多个文件夹来处理这些导入。例如，在第二种方法中，您将需要这样的结构：

|-- components.platformAdaptive
    |-- index.js
|-- components.mobile
    |-- index.js
|-- components.desktop
    |-- index.js

或者您可以使用/ 代替. 来创建嵌套结构（例如：components/platformAdaptive）：

|-- components
    |-- [+] platformAdaptive
    |-- [+] mobile
    |-- [+] desktop

---

方法#3

处理这种情况的另一种方法是使用不同名称的不同类。例如，一个 List 组件具有不同的移动和桌面实现，那么将有三个组件，如 ListPlatformAdaptive、ListMobile、ListDesktop - 其中 ListPlatformAdaptive 可能具有基本实现 - 和一个 barrel 在导出组件的组件文件夹：

import * as ListPlatformAdaptive from './list.platformAdaptive';
import * as ListMobile from './list.mobile';
import * as ListDesktop from './list.desktop';

export {
    ListPlatformAdaptive,
    ListMobile,
    ListDesktop
}

结构是这样的：

|-- components
    |-- list.platformAdaptive.js
    |-- list.mobile.js
    |-- list.desktop.js
    |-- index.js

那么操作会是这样的：

const targets = {
  desktop: 'Desktop',
  mobile: 'Mobile'
};
const source = `
    import Home from './components/home';
    import About from './components/about';
    import HeaderPlatformAdaptive as Header from './shared/Header';
    import FooterPlatformAdaptive as Footer from './shared/about';
    import CategoriesPlatformAdaptive as Categories from './category/categories';
    
    // rest of code
`;

const replace = 'PlatformAdaptive';
const manipulatedMob = manipulateSource(source, replace, targets.mobile);
const manipulatedDesk = manipulateSource(source, replace);

console.log(manipulatedMob);
console.log(manipulatedDesk);

function manipulateSource(src, replace, target = targets.desktop) {
  const pattern = new RegExp(replace, 'g');
  const manipulated = src.replace(pattern, target);

  return manipulated;
}

使用这种方法，您应该注意要排除的barrel 文件，这种方法的缺点是所有组件都已导入，因此无法接受导入成本。

---

方法#4

我能想到的另一种方法是添加一些注释作为注释，然后对该行中的存在做出反应：

const targets = {
  desktop: 'Desktop',
  mobile: 'Mobile'
};
const source = `
    import Home from './components/home';
    import About from './components/about';
    import Header from './shared/Header'; /* @adaptive */
    import Footer from './shared/about';  /* @adaptive: Desktop */
    import Categories from './category/categories'; /* @adaptive: Mobile */
                
    // rest of code
`;

const manipulatedMob = manipulateSource(source, targets.mobile);
const manipulatedDesk = manipulateSource(source);

console.log(manipulatedMob);
console.log(manipulatedDesk);

function manipulateSource(src, targetDevice = targets.desktop) {
  const pattern = /(?<left>.*import\s+)(?<name>\w+)(?<rest1>.*)\@adaptive(\:\s*(?<target>\w+))?(?<rest2>.*)/g
  const manipulated = src.replace(pattern, (matched, ...args) => {
    let [{
      left,
      name,
      rest1,
      target,
      rest2
    }] = args.slice(-1);
    target = target || targetDevice;
    return target == targetDevice ?
      `${left}${name}${target}$ as ${name}${rest1}${rest2}` :
      matched;
  });

  return manipulated;
}

在这种方法中，如方法#2，导入的组件名称与原始名称不同，但映射到原始名称，这一点都不好，但我最喜欢它，因为如果在barrel 文件中使用它，并且可以更改导入的文件地址。另一个有趣的部分是传递与target device 相关的目标文件地址并解析它。

结论

如您所见，我所有的答案都是关于处理源而不检查文件的存在，并假设开发人员对此很确定。顺便说一句，您可以搜索以查看是否可以找到文件绝对路径，然后检查目标替代品的可用性。