鍍金池/ 問答/Java  HTML/ [已解決]如何利用webpack將js文件打包成json文件

[已解決]如何利用webpack將js文件打包成json文件

業(yè)務(wù)背景

  • 用webstorm編寫小程序
  • 有一個(gè)app.json文件存放所有頁面路徑
  • 因?yàn)橛猩虾脦资畟€(gè)頁面,這樣羅列下來感覺非常混亂,后期要找東西的時(shí)候很麻煩
  • 所以想加注釋進(jìn)行分類

示例代碼

{
  "pages": [
    // 用戶相關(guān)
    "pages/window/window",
    "pages/ptp/ptp",
    "pages/detail2/detail2",
    "pages/detail/detail",
    "pages/doubleroom/room/room",
    "pages/mine/mine",
    "pages/player/index/index",
    "pages/main/main",
    // 商品相關(guān)
    "pages/doubleroom/roomlist/roomlist",
    "pages/doubleroom/roomname/roomname",
    "pages/minezb/minezb",
    "pages/zbappintosc/zbappintosc",
    "pages/index/index",
    "pages/mysc/mysc",
    // 訂單相關(guān)
    "pages/changegg/changegg",
    "pages/ggs/ggs",
    "pages/bjgg/bjgg",
    "pages/zpzb/zpzb",

問題描述

  • 但是json文件不支持注釋
  • 這樣寫在小程序開發(fā)者工具中會(huì)報(bào)錯(cuò)

自己嘗試

  • 用過mpvue
  • 他們的頁面信息都是配置在main.js文件里面的pages參數(shù)
  • 最后自動(dòng)編譯成了app.json

但是不知道mpvue是怎么實(shí)現(xiàn)的

期望的結(jié)果

通過一個(gè)webpack插件什么東西的,怎么實(shí)現(xiàn)我的需求呢?將下面這個(gè)js文件打包成json文件

export default {
  pages: [
    // 用戶相關(guān)
    'pages/a',
    // 訂單相關(guān)
    'pages/b
  ]
}
回答
編輯回答
氕氘氚

json.stringify

2018年1月18日 05:53
編輯回答
維她命

殺雞焉用牛刀？

const pages = require('./pages.js')

fs.writeFileSync('pages.json', JSON.stringify(pages))

如果需要集成到webpack，可以用這個(gè)插件https://www.npmjs.com/package...：

const pages = require('./pages.js')

new GenerateJsonPlugin(
  'my-file.json',
  pages,
)
2018年8月1日 08:58