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

问题描述

我想以一种更智能"的编程方式组装一个 manifest.json 文件，正如 Chrome 扩展程序所使用的那样.我使用 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屋！