Question

我希望实现的是为Web应用和cordova应用程序提供单一代码库。

我希望有一个如下所示的文件夹/文件结构：

- components
  - component1.js
  - component2.js
  - component2.cordova.js

理想情况下，我希望在导入组件的任何地方继续使用import Component2 from 'component2'。

我将为每个版本都有一个单独的webpack.config文件，所以我希望我可以首先查看cordova webpack配置component1.cordova.js，如果它不存在，请回到{ {1}}。

似乎webpack.NormalModuleReplacementPlugin可以查找cordova版本，但我不确定如果component1.js没有{＆1}}我是否/如何让它回归component1.js ＃39; t存在。

Answer 1

我相信不需要插件。

以下是您需要做的事情：

resolve: {
        root: [SRC_PATH, NODE_MODULES_PATH],
        fallback: NODE_MODULES_PATH,        
        extensions: ['.cordova.js','.js'],
}

关键是extensions参数。您可能已经注意到，扩展按给定顺序进行探测。

如果您需要明确要求其中一个.js或.cordova.js，则应指定完整的文件名，例如：require('components/c1.cordova.js')

注意：resolve位于配置对象的根目录。

所以答案在这里结束，但还有更多。

resolve.root参数的额外好处是您现在可以使用相对于SRC_PATH的路径而不是凌乱的../../../来导入

当然，您需要预先定义NODE_MODULES_PATH和SRC_PATH。

使用此配置，您可以在SRC_PATH树中的任何文件中写入如下内容：

import c from 'components/component1';

或

var c = require('components/component1')

Answer 2

我有同样的问题，这是我的解决方案：

const fs = require('fs');
const path = require('path');
...
new webpack.NormalModuleReplacementPlugin(/\.ts$/, function(resource) {
    if (!resource.request.endsWith('.cordova.ts')) {
        var file_for_cordova = resource.request.replace(/\.ts$/, '.cordova.ts');
        if (fs.existsSync(path.resolve(resource.context, file_for_cordova))){
            resource.request = file_for_cordova;
          }
      }
}),

我认为，它仍然不完美，你可以改进它

如何使用webpack.NormalModuleReplacementPlugin进行可选的条件文件加载

2 个答案: