如何使用webpack構建JSON文件？

我想以一種「更智能」的編程方式組裝Chrome瀏覽器擴展所用的manifest.json文件。我使用npm作爲我的依賴關係解決方案，其package.json包含一些與manifest.json文件共享的字段，包括「名稱」，「說明」和「版本」。如何使用webpack構建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加載器，但我不清楚它將如何用於這種情況。

來源

2017-05-28 user108471

感謝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這樣的方式以友好的方式公開某些信息。

來源

2017-05-29 19:48:45 user108471

它的固定？或者如果你想要http://webpack.github.io/docs/usage-with-gulp.html，那麼你可以嘗試使用gpack，所以你可以使用這個軟件包'gulp-json-editor'。 –

@RahmatAligos謝謝，但我的目標是簡化構建過程，以便我不必同時使用Gulp和Webpack。這是阻止我切換的少數幾個問題之一，這裏的定製加載器解決方案解決了我的問題。 – user108471

這是一個很棒的解決方案！我用文件加載器而不是json-loader，所以我沒有得到manifest.js並做了一些其他的調整：https://gist.github.com/bronson/163d7d4dde2a845ea3d6af3a0d86d174非常感謝你回答你自己的問題。 – bronson

-1

試試這個軟件包，你可以閱讀你的json文件，並且在你使用它進行自定義之後構建新的json之後。 https://github.com/webpack-contrib/json-loader

來源

2017-05-29 03:05:14

我以前遇到過這個問題，我無法工作，如何用它來_write_新的JSON文件。你能否提供一個配置示例來說明如何使用它來解決這個問題？ – user108471

我用你的腳本不夠，我出版了它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

來源

2017-09-27 22:06:51 bronson

如何使用webpack構建JSON文件？

回答

相關問題