如何使用webpack构建JSON文件？

Question

我想以一种“更智能”的编程方式组装Chrome浏览器扩展所用的manifest.json文件。我使用npm作为我的依赖关系解决方案，其package.json包含一些与manifest.json文件共享的字段，包括“名称”，“说明”和“版本”。

有没有办法定义类似部分manifest.json文件的文件，其中包含所有Chrome特定的内容，但在适当的位置填写共享值？我发现，这是很简单的咕嘟咕嘟：

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加载器，但我不清楚它将如何用于这种情况。

Answer 1

感谢Sean Larkin从Webpack项目中接触到我并帮助我弄清楚如何完成这件事。我需要创建一个自定义加载器来处理读取现有manifest.json并添加我感兴趣的领域。

// 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。

// 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时，是包含manifest.js和manifest.json，包含一切manifest.json从原来的顶层manifest.json加上package.json附加信息一dist/目录。额外的manifest.js是一个脚本，它将manifest.json的内容暴露给项目中需要它的任何其他JavaScript。这可能不太有用，但Chrome扩展可能想要在某个脚本中以require这样的方式以友好的方式公开某些信息。

Answer 2

试试这个软件包，你可以阅读你的json文件，并且在你使用它进行自定义之后构建新的json之后。 https://github.com/webpack-contrib/json-loader

Answer 3

我用你的脚本不够，我出版了它NPM稍微修改后的版本：https://github.com/bronson/manifest-package-loader

希望这是为yarn add -D manifest-package-loader一样方便，更新webpack.config.js。

巧合的是，就在今天早上我碰到CHEM-loader，那也可能工作跑：https://github.com/mrmisterman/chem-loader