与W / Browserify捆绑时,异步未按预期工作

时间:2018-10-29 15:15:41

标签: javascript async-await browserify

我有一个构建脚本,该脚本在某一时刻接受所有src和href属性,其值以w / src ='。/ src开头,并将它们转换为index.js文件中的src ='。/绑定的index.js帐户已从/ src /移至/ dist /文件夹。我遇到的问题是捆绑过程是异步的,并且我使用诺言将其考虑在内,但是构建无法按预期工作。 bundle.js的相关部分是:

// ===========  Build the browserify bundle using the browserify api ========== //
      // First check if index.js exists
      /* jshint ignore:start */
      const browserifyJS = async function(result) {
        try {
          console.log(result); // output result from previous async function uglifyJS
          console.log("Checking for index.js");
          await open("index.js", "r");
          console.log("/dist/index.js: build and uglify");
          // Browserify API calls
          let b = require("browserify")();
          b.add("index.js");
          await b.transform("uglifyify", { global: true });
          let indexjs = fs.createWriteStream("dist/index.js");
          // Bundle the files and their dependencies into a
          // single javascript file.
          await b.bundle().pipe(indexjs);
          .


          return "========== Browserify JavaScript Bundling Successful!!! ===============";
        } catch (err) {
          console.log("ERROR: " + err);
        }
      }; // End of browserifyJS
      /* jshint ignore:end */

      // ============== End Browserify Build ========================================//

//更多构建内容,然后

// ====== updateFileLinks (Read and update links from dist/index.html, main.css, and index.js if necessary) ============ //
  /* jshint ignore:start */
  const UpdateFileLinks = async function() {
    try {
      await updateLinks("index.html");
      await updateLinks("main.css");
      await updateLinks("index.js");
    } catch (err) {
      console.log("ERROR:", `err ${warning}`);
    }
  };

  /* jshint ignore:end */
  // =================== End updateLinks =============================== //

当我们调用updateLinks.js时,browserify尚未完成对index.js的捆绑,链接更改未成功。写入文件或读取文件没有任何错误可供我检查,我也认为这很奇怪。我可以使写流正常工作的唯一方法是在承诺链中使用kludge设置超时,如下所示:

 // ==================================================== //
  // ========== Call promise chain ====================== //
  // ==================================================== //
  uglifyJS()
    .then(result => {
      return browserifyJS(result);
    })

// bunch of then's

    .then(result => {
      return miscOperations(result);
    })
    .then(result => {
      console.log(result);
      console.log(`Pause for index.js to bundle and finish \u270B`);
      setTimeout(() => {  // I know this is a kludge!!
        return UpdateFileLinks();
      }, 7000);
    })
    .catch(function(error) {
      console.err(error);
    });

我显然不像我想象的那样理解异步操作。 b.bundle和b.transform没有像我想的那样等待。任何帮助适当地重构它,将不胜感激。预先感谢。

P.S。 -奖励答案。有没有一种方法,而无需编写我自己的更新链接的方法?我只使用npm-scripts,但没有任务运行器。搜索npm repo没有显示任何内容:)

0 个答案:

没有答案