javascript - 创建可重用的 JS 文件 - 导入 - 导出不起作用

Question

我正在尝试使用可重用的 JS 来从服务器加载一些文件，但是如果我将代码放在一起或者如果我有单独的文件并且我不明白为什么，那么这种工作方式会有所不同

合起来:

require('isomorphic-fetch');

function addAssetsFromManifest(file) {
  const loadManifest = fetch('/path/manifest.json');
  loadManifest.then((resp) => {
    if (resp.status >= 200 && resp.status < 300) {
      const loadJson = resp.json();
      loadJson.then((json) => {
        const scriptTag = document.createElement('script');
        scriptTag.type = 'text/javascript';
        scriptTag.src = `/${json[file]}`;
        const { body } = document;
        body.appendChild(scriptTag);
        return json;
      });
      return loadJson.then(Promise.reject.bind(Promise));
    }
    return loadManifest.then(Promise.reject.bind(Promise));
  });
}


 document.addEventListener('DOMContentLoaded', () => {
   addAssetsFromManifest('path/js/file.js');
});

但是如果我像这样分割代码就不起作用:addAssetsFromManifest.js:

require('isomorphic-fetch');

export default function addAssetsFromManifest(file) {
  const loadManifest = fetch('/path/manifest.json');
  loadManifest.then((resp) => {
    if (resp.status >= 200 && resp.status < 300) {
      const loadJson = resp.json();
      loadJson.then((json) => {
        const scriptTag = document.createElement('script');
        scriptTag.type = 'text/javascript';
        scriptTag.src = `/${json[file]}`;
        const { body } = document;
        body.appendChild(scriptTag);
        return json;
      });
      return loadJson.then(Promise.reject.bind(Promise));
    }
    return loadManifest.then(Promise.reject.bind(Promise));
  });
}

loader.js

import addAssetsFromManifest from './addAssetsFromManifest';

document.addEventListener('DOMContentLoaded', () => {
  addAssetsFromManifest('path/js/file.js');
});

根本不起作用。我不确定这是否与 webpack 相关，如果是，我将分享 package.json 和 webpack.config.js

任何想法

Answer 1

尝试使用 require 和 module.export

module.export = function addAssetsFromManifest(file){......}

和

const addAssetsFromManifest = require("./addAssetsFromManifest")