如何使用 JSON 文件作为 JS 对象而不将其导入到 webpack 编译代码中?

休伯特·库比亚克

在我的 Angular 混合应用程序的引导过程中(Angular7 和 AngularJS 并排工作)。我想使用来自单独的配置 json 文件的配置作为窗口变量。目前我正在使用:

setAngularLib(AngularJs);
platformBrowserDynamic().bootstrapModule(CatalogModule).then(platformRef => {
  const config = require('./config.json');
  (<any>window).__APP_CONFIG__ = config;

  const appMountPoint = document.querySelector('[xs-app-mountpoint]');
  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
  upgrade.bootstrap(appMountPoint, [Ng1Module], {strictDi: false});

  console.log('hybrid app bootstrapped');
})
  .catch(err => console.log(err));

但是,目前 Webpack 正在编译后将整个 config.json 文件内容放入一个 main.js 文件中,这是我不想要的。我想获取配置文件并将其用作 Window 变量,但将 config.json 文件与 main.js 分开。

怎么可能?我尝试使用

const config = JSON.parse(fs.readFileSync('./config.json', 'utf8'));

但它没有用。

休伯特·库比亚克

我设法通过使用 Fetch API 找到了解决方案:

fetch('config.json')
  .then(response => response.json())
  .then((config) => {
    platformBrowserDynamic().bootstrapModule(CatalogModule).then(platformRef => {
      (<any>window).__APP_CONFIG__ = config;
      const appMountPoint = document.querySelector('[xs-app-mountpoint]');
      const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
      upgrade.bootstrap(appMountPoint, [Ng1Module], {strictDi: false});

      console.log('hybrid app bootstrapped');
    }).catch(err => console.log(err));
  });

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用Webpack 4编译手写笔而不将其导入JS文件?

当我使用webpack并将其导入到应用js中时,swiper滑块不起作用

如何将主要组件直接导入 *.vue 文件而不是将其导入到 Vue 中的主要 *.js 文件?

如何将json文件内容作为文档导入到mongodb中?

Access是否可以读取Excel文件的内容而不将其导入到表中?

如何使用Webpack在Vue.js单文件组件中导入json文件

react.js 如何设法使用导入到 JavaScript 文件(组件)中的 CSS 文件?

如何将package.json导入Typescript文件而不将其包含在编译输出中?

如何在npm编译的js文件中使用jquery而不将jquery编译到输出中

Webpack-外部JS / JSON文件作为依赖项

将输出作为字符串汇总到 JSON 文件中,而不是直接作为 JS 文件

正确使用.kv文件进行Kivy并将其导入到Python脚本中

如何使用webpack将js复制到html文件?

如何将多个工作表从单个Excel文件导入到Microsoft Word文档中,作为链接的对象和可更新的对象?

使用Webpack导入CSS和JS文件

如何使用webpack性能对象将js文件分成vue cli 3中的块?

如何将数据从 JSON 文件导入到嵌入中?

如何将此 JSON 文件正确导入到 Pandas 中?

使用嵌套数组将JSON文件导入到SQL Server表中

如何使用汇总功能导入JavaScript模块并将其捆绑到单个js文件中?

CSS文件未导入到Webpack

如何说服VS代码在JSON文件中接受#作为注释?

使用mongoimport将json从文件导入到mongodb

将JS包导入到所需文件中

如何使用webpack构建JSON文件?

如何将自己的.py文件作为模块导入到Sublime中的另一个.py文件

Webpack - 如何判断不为特定入口点编译 js 文件

如何使用 webpack 加入 JS 文件?

如何使用webpack添加js文件?