Question

你好，希望你好。

我目前正在努力使用webpack，并且正在寻找满足以下条件的最佳解决方案：

我想从我的单页应用程序加载来自json的配置，并在任何地方使用它。这实际上很有效：

externals: {
    'config': JSON.stringify(getAppConfig())
}

这当然被添加到webpack配置中，getAppConfig是：

var getAppConfig = () => {
    var finalConfig = require('./config.json');
    if (process.argv.indexOf('--env.production')) {
        finalConfig = Object.assign(finalConfig, require('./config.production.json'));
    }
    /*more stuff here but removed for simplicity*/
    return finalConfig;
}

然后在模块中，我做

import Config from 'config';

并使用导入的javascript对象。令人惊讶的是一切都按预期工作:)我的问题实际上是webpack中的这个丑陋的错误

ERROR in ./ClientApp/store/WeatherForecasts.ts 
Module not found: Error: Cannot resolve module 'config' in

我真的不希望出于CI的目的而出现假错误，但是我更愿意理解发生了什么，而不是以某种方式忽略它。顺便说一下，我正在为项目使用打字稿，不确定它是否会改变任何东西，但最好说出我猜的所有事实。这是打字稿模块的定义：

declare module 'config' {
    export interface Config {
        backendUrl: string;
    }
    export default {} as Config;
}

所有人都非常感谢。彼得

Answer 1

好的，我有一个解决方案。而且我恐怕部分是因为我没有正确阅读文档。请参阅我使用webpack-merge，我不知道它无法正确合并数组。因此，我的服务器预渲染包配置覆盖了共享的一个，它丢失了。现在好了

Answer 2

我曾经尝试将全局变量（在webpack外部配置中定义）导入打字稿文件中。我通过以下步骤对其进行了修复。

删除外部对象

外部人员：{ lodash：“ _”， }，
将lodash添加到index.html

<script src="https://images.cloudhubpanel.com/docs/js-lib/lodash-4.17.5.min.js"></script>

将 index.d.ts 添加到项目根文件夹

declare let _: any; 
export default _;

引用 _ 不需要导入，就像这样，它是我的文件之一

import Enums from './EnumsManager';
import { getStore } from './localStorage';
/**
 * getAuthorization
 */
export const getAuthorization = (): string => {
  const loginUser: any = getStore(Enums.LocalStorageKey);
  if (_.isEmpty(loginUser)) {
    return '';
  }
  const userData: any = JSON.parse(loginUser).token_info;
  if (_.isEmpty(userData)) {
    return '';
  }
  const { token_type, access_token } = userData;
  return `${token_type} ${access_token}`;
};

我正在尝试使用webpack + typescript + react。我的项目是由

创建的

npm install -g create-react-app

create-react-app my-app --scripts-version=react-scripts-ts

Webpack外部模块未找到

2 个答案: