如何使用webpack构建JSON文件？ [英] How do I build a JSON file with webpack?

问题描述

我想以更智能的程序化方式组装Chrome扩展程序使用的 manifest.json 文件。我使用npm进行依赖项解析，其 package.json 包含一些带有 manifest.json 的共享字段文件，包括名称，描述和版本。

I'd like to assemble a manifest.json file, as used by Chrome extensions, in a "smarter," programmatic sort of way. I'm using npm for my dependency resolution, and its package.json includes some shared fields with the manifest.json file, including "name," "description," and "version."

有没有办法定义类似部分 manifest.json的内容包含所有Chrome特定内容的文件，但在适当的地方填写共享值？我发现这在Gulp中非常简单：

Is there a way to define something like a partial manifest.json file which includes all the Chrome-specific stuff, but fill in shared values where appropriate? I've found that this is pretty straightforward in Gulp:

var gulp = require('gulp');
var fs = require('fs');
var jeditor = require('gulp-json-editor');

gulp.task('manifest', function() {
    var pkg = JSON.parse(fs.readFileSync('./package.json'));
    gulp.src('./manifest.json')
      .pipe(jeditor({
        'name': pkg.name,
        'description': pkg.description,
        'version': pkg.version,
        'author': pkg.author,
        'homepage_url': pkg.homepage,
      }))
      .pipe(gulp.dest("./dist"));
});

即使有一些为此目的而设计的npm包，有人可以向我解释一下这可能一般吗？我知道Webpack 2有一个内置的json加载器，但我不清楚如何在这种情况下使用它。

Even if there's some npm package out there designed for this purpose, can someone explain to me how something like this might be done generally? I know Webpack 2 has a built-in json loader, but I'm not clear how it would be used in a case like this.

推荐答案

从Webpack项目中获得Sean Larkin的信息，以便与我联系并帮助我弄清楚如何完成这项工作。我需要创建一个自定义加载器来处理读取现有的 manifest.json 并添加我感兴趣的字段。

Credit to Sean Larkin from the Webpack project for reaching out to me and helping me figure out how to get this done. I needed to create a custom loader to handle reading the existing manifest.json and adding my fields of interest to it.

// File: src/manifest-loader.js

const fs = require('fs');

// A loader to transform a partial manifest.json file into a complete
// manifest.json file by adding entries from an NPM package.json.
module.exports = function(source) {
  const pkg = JSON.parse(fs.readFileSync('./package.json'));
  const merged = Object.assign({}, JSON.parse(source), {
    'name': pkg.name,
    'description': pkg.description,
    'version': pkg.version,
    'author': pkg.author,
    'homepage_url': pkg.homepage,
  });
  const mergedJson = JSON.stringify(merged);
  // In Webpack, loaders ultimately produce JavaScript. In order to produce
  // another file type (like JSON), it needs to be emitted separately.
  this.emitFile('manifest.json', mergedJson);
  // Return the processed JSON to be used by the next item in the loader chain.
  return mergedJson;
};

然后配置webpack以使用我的自定义 manifest-loader 。

Then configure webpack to use my custom manifest-loader.

// File: webpack.config.js

const path = require('path');

module.exports = {
  // Tell Webpack where to find our custom loader (in the "src" directory).
  resolveLoader: {
    modules: [path.resolve(__dirname, "src"), "node_modules"]
  },

  // The path to the incomplete manifest.json file.
  entry: "./manifest.json",
  output: {
    // Where the newly built manifest.json will go.
    path: path.resolve(__dirname, 'dist'),
    // This file probably won't actually be used by anything.
    filename: "manifest.js",
  },

  module: {
    rules: [
      {
        // Only apply these loaders to manifest.json.
        test: /manifest.json$/,
        // Loaders are applied in reverse order.
        use: [
          // Second: JSON -> JS
          "json-loader",
          // First: partial manifest.json -> complete manifest.json
          "manifest-loader",
        ]
      }
    ]
  }
};

运行Webpack时的结果是 dist / 目录包含 manifest.js 和 manifest.json ， manifest.json 包含原始顶级 manifest.json 中的所有内容以及 package.json 。额外的 manifest.js 是一个脚本，它将 manifest.json 的内容公开给项目中的任何其他JavaScript。想要它。这可能不是太有用，但Chrome扩展程序可能会想到 require 这在某个地方的脚本中以友好的方式公开这些信息。

The result, when running Webpack, is a dist/ directory containing manifest.js and manifest.json, with manifest.json containing everything from the original, top-level manifest.json plus the additional info from package.json. The extra manifest.js is a script that exposes the contents of manifest.json to any other JavaScript in the project that wants it. This is probably not too useful, but a Chrome extension might conceivably want to require this in a script somewhere to expose some of this information in a friendly way.

这篇关于如何使用webpack构建JSON文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！