☰

webpackでJSONファイルを作成するにはどうすればいいですか? 質問する

tag-icon • tag-icon javascript npm webpack
webpackでJSONファイルを作成するにはどうすればいいですか? 質問する

manifest.jsonChrome 拡張機能で使用されるファイルを、より「スマート」なプログラム的な方法で組み立てたいと思います。依存関係の解決には npm を使用しており、これには「名前」、「説明」、「バージョン」など、ファイルpackage.jsonと共有されるフィールドがいくつか含まれています。manifest.json

manifest.jsonChrome 固有のものをすべて含み、適切な場所に共有値を入力する部分ファイルのようなものを定義する方法はありますか? 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 ローダーが組み込まれていることは知っていますが、このような場合にそれがどのように使用されるのかはわかりません。

ベストアンサー1

実際には@user108471のものよりもエレガントな解決策があります（それに触発されていますが）。それはcopy-webpack-plugin. そのtransformmanifest.jsonこの機能を使用すると、コピー先にコピーする前に、必要な値をその場で追加できます。

これには 2 つの利点があります。

  • 余分な不要な-bundleを生成しませんmanifest.js（@bronson の解決策これも修正されます）
  • 他のファイルでrequireそれをする必要はありません（意味的に逆のように思えます）manifest.json.js

最小限の設定は次のようになります。

webpack.config.js

// you can just require .json, saves the 'fs'-hassle
let package = require('./package.json');

function modify(buffer) {
   // copy-webpack-plugin passes a buffer
   var manifest = JSON.parse(buffer.toString());

   // make any modifications you like, such as
   manifest.version = package.version;

   // pretty print to JSON with two spaces
   manifest_JSON = JSON.stringify(manifest, null, 2);
   return manifest_JSON;
}


module.exports = {

   // ...

   plugins: [
      new CopyWebpackPlugin([
         {
            from: "./src/manifest.json",
            to:   "./dist/manifest.json",
            transform (content, path) {
                return modify(content)
            }
         }])
   ]

}

おすすめ記事