opensourcemirror
/
webpack
mirror of https://github.com/webpack/webpack.git
1
0
Fork 0
Code Issues Releases Wiki Activity

add yaml and json5 to custom-json-modules example

This commit is contained in:
Sergey Melyukov 2019-11-28 20:39:35 +03:00
parent 61a08df893
commit 3605d6dc9a
8 changed files with 206 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
examples/custom-json-modules/README.md
View File

@ -14,24 +14,57 @@ bio = "GitHub Cofounder & CEO\nLikes tater tots and beer."
dob = 1979-05-27T07:32:00Z
```
# data.yaml
```yaml
title: TOML Example
owner:
name: Tom Preston-Werner
organization: GitHub
bio: |-
GitHub Cofounder & CEO
Likes tater tots and beer.
dob: 1979-05-27T07:32:00.000Z
```
# data.json
```json5
{
// comment
title: "TOML Example",
owner: {
name: "Tom Preston-Werner",
organization: "GitHub",
bio: "GitHub Cofounder & CEO\n\
Likes tater tots and beer.",
dob: "1979-05-27T07:32:00.000Z"
}
}
```
# example.js
```javascript
import data from "./data.toml";
import toml from "./data.toml";
import yaml from "./data.yaml";
import json from "./data.json";
document.querySelector('#app').innerHTML = `
document.querySelector('#app').innerHTML = [toml, yaml, json].map(data => `
<h1>${data.title}</h1>
<div>${data.owner.name}</div>
<div>${data.owner.organization}</div>
<div>${data.owner.bio}</div>
<div>${data.owner.dob}</div>
`;
`).join('<br><br>');
```
# webpack.config.js
```javascript
const toml = require("toml");
const json5 = require('json5');
const yaml = require('yamljs');
module.exports = {
module: {
@ -44,6 +77,24 @@ module.exports = {
return toml.parse(input);
}
}
},
{
test: /\.json$/,
type: "json",
parser: {
parse(input) {
return json5.parse(input);
}
}
},
{
test: /\.yaml$/,
type: "json",
parser: {
parse(input) {
return yaml.parse(input);
}
}
}
]
}
@ -66,15 +117,19 @@ module.exports = {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _data_toml__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./data.toml */ 1);
/* harmony import */ var _data_yaml__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./data.yaml */ 2);
/* harmony import */ var _data_json__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./data.json */ 3);
document.querySelector('#app').innerHTML = `
<h1>${_data_toml__WEBPACK_IMPORTED_MODULE_0__/* .default.title */ .title}</h1>
<div>${_data_toml__WEBPACK_IMPORTED_MODULE_0__/* .default.owner.name */ .owner.name}</div>
<div>${_data_toml__WEBPACK_IMPORTED_MODULE_0__/* .default.owner.organization */ .owner.organization}</div>
<div>${_data_toml__WEBPACK_IMPORTED_MODULE_0__/* .default.owner.bio */ .owner.bio}</div>
<div>${_data_toml__WEBPACK_IMPORTED_MODULE_0__/* .default.owner.dob */ .owner.dob}</div>
`;
document.querySelector('#app').innerHTML = [_data_toml__WEBPACK_IMPORTED_MODULE_0__/* .default */ , _data_yaml__WEBPACK_IMPORTED_MODULE_1__/* .default */ , _data_json__WEBPACK_IMPORTED_MODULE_2__/* .default */ ].map(data => `
<h1>${data.title}</h1>
<div>${data.owner.name}</div>
<div>${data.owner.organization}</div>
<div>${data.owner.bio}</div>
<div>${data.owner.dob}</div>
`).join('<br><br>');
/***/ }),
@ -106,6 +161,62 @@ document.querySelector('#app').innerHTML = `
module.exports = JSON.parse("{\"title\":\"TOML Example\",\"owner\":{\"name\":\"Tom Preston-Werner\",\"organization\":\"GitHub\",\"bio\":\"GitHub Cofounder & CEO\\nLikes tater tots and beer.\",\"dob\":\"1979-05-27T07:32:00.000Z\"}}");
/***/ }),
/* 2 */
/*!*******************!*\
!*** ./data.yaml ***!
\*******************/
/*! export default [provided] [no usage info] [no name, virtual] */
/*! export owner [provided] [no usage info] [missing usage info prevents renaming] */
/*! export bio [provided] [no usage info] [missing usage info prevents renaming] */
/*! export dob [provided] [no usage info] [missing usage info prevents renaming] */
/*! exports [not provided] [no usage info] */
/*! export name [provided] [no usage info] [missing usage info prevents renaming] */
/*! export organization [provided] [no usage info] [missing usage info prevents renaming] */
/*! other exports [not provided] [no usage info] */
/*! export title [provided] [no usage info] [missing usage info prevents renaming] */
/*! other exports [not provided] [no usage info] */
/*! export owner [provided] [no usage info] [missing usage info prevents renaming] */
/*! export bio [provided] [no usage info] [missing usage info prevents renaming] */
/*! export dob [provided] [no usage info] [missing usage info prevents renaming] */
/*! exports [not provided] [no usage info] */
/*! export name [provided] [no usage info] [missing usage info prevents renaming] */
/*! export organization [provided] [no usage info] [missing usage info prevents renaming] */
/*! other exports [not provided] [no usage info] */
/*! export title [provided] [no usage info] [missing usage info prevents renaming] */
/*! other exports [not provided] [no usage info] */
/*! runtime requirements: module */
/***/ ((module) => {
module.exports = JSON.parse("{\"title\":\"TOML Example\",\"owner\":{\"name\":\"Tom Preston-Werner\",\"organization\":\"GitHub\",\"bio\":\"GitHub Cofounder & CEO\\nLikes tater tots and beer.\",\"dob\":\"1979-05-27T07:32:00.000Z\"}}");
/***/ }),
/* 3 */
/*!*******************!*\
!*** ./data.json ***!
\*******************/
/*! export default [provided] [no usage info] [no name, virtual] */
/*! export owner [provided] [no usage info] [missing usage info prevents renaming] */
/*! export bio [provided] [no usage info] [missing usage info prevents renaming] */
/*! export dob [provided] [no usage info] [missing usage info prevents renaming] */
/*! export name [provided] [no usage info] [missing usage info prevents renaming] */
/*! export organization [provided] [no usage info] [missing usage info prevents renaming] */
/*! other exports [not provided] [no usage info] */
/*! export title [provided] [no usage info] [missing usage info prevents renaming] */
/*! other exports [not provided] [no usage info] */
/*! export owner [provided] [no usage info] [missing usage info prevents renaming] */
/*! export bio [provided] [no usage info] [missing usage info prevents renaming] */
/*! export dob [provided] [no usage info] [missing usage info prevents renaming] */
/*! export name [provided] [no usage info] [missing usage info prevents renaming] */
/*! export organization [provided] [no usage info] [missing usage info prevents renaming] */
/*! other exports [not provided] [no usage info] */
/*! export title [provided] [no usage info] [missing usage info prevents renaming] */
/*! other exports [not provided] [no usage info] */
/*! runtime requirements: module */
/***/ ((module) => {
module.exports = JSON.parse("{\"title\":\"TOML Example\",\"owner\":{\"name\":\"Tom Preston-Werner\",\"organization\":\"GitHub\",\"bio\":\"GitHub Cofounder & CEO\\nLikes tater tots and beer.\",\"dob\":\"1979-05-27T07:32:00.000Z\"}}");
/***/ })
/******/ ]);
```
@ -171,24 +282,30 @@ module.exports = JSON.parse("{\"title\":\"TOML Example\",\"owner\":{\"name\":\"T
## webpack output
```
Hash: 05de32641bf6fbad9390
Hash: 8f69e0ad2f96aaaa29ec
Version: webpack 5.0.0-beta.7
Time: 145ms
Time: 123ms
Asset Size
output.js 4.57 KiB [emitted] [name: main]
output.js 8.17 KiB [emitted] [name: main]
Entrypoint main = output.js
chunk output.js (main) 428 bytes (javascript) 274 bytes (runtime) [entry] [rendered]
chunk output.js (main) 917 bytes (javascript) 274 bytes (runtime) [entry] [rendered]
> ./example.js  main
./data.json 188 bytes [built]
[exports: default, owner, title]
[used exports unknown]
harmony side effect evaluation ./data.json ./example.js 3:0-31 
harmony import specifier ./data.json ./example.js 5:56-60 
./data.toml 188 bytes [built]
[exports: default, owner, title]
[used exports unknown]
harmony side effect evaluation ./data.toml ./example.js 1:0-31 
harmony import specifier ./data.toml ./example.js 4:8-18 
harmony import specifier ./data.toml ./example.js 5:9-24 
harmony import specifier ./data.toml ./example.js 6:9-32 
harmony import specifier ./data.toml ./example.js 7:9-23 
harmony import specifier ./data.toml ./example.js 8:9-23 
./example.js 240 bytes [built]
harmony import specifier ./data.toml ./example.js 5:44-48 
./data.yaml 188 bytes [built]
[exports: default, owner, title]
[used exports unknown]
harmony side effect evaluation ./data.yaml ./example.js 2:0-31 
harmony import specifier ./data.yaml ./example.js 5:50-54 
./example.js 353 bytes [built]
[no exports]
[used exports unknown]
entry ./example.js null main 

11
examples/custom-json-modules/data.json Normal file
View File

@ -0,0 +1,11 @@
{
// comment
title: "TOML Example",
owner: {
name: "Tom Preston-Werner",
organization: "GitHub",
bio: "GitHub Cofounder & CEO\n\
Likes tater tots and beer.",
dob: "1979-05-27T07:32:00.000Z"
}
}

8
examples/custom-json-modules/data.yaml Normal file
View File

@ -0,0 +1,8 @@
title: TOML Example
owner:
name: Tom Preston-Werner
organization: GitHub
bio: |-
GitHub Cofounder & CEO
Likes tater tots and beer.
dob: 1979-05-27T07:32:00.000Z

8
examples/custom-json-modules/example.js
View File

@ -1,9 +1,11 @@
import data from "./data.toml";
import toml from "./data.toml";
import yaml from "./data.yaml";
import json from "./data.json";
document.querySelector('#app').innerHTML = `
document.querySelector('#app').innerHTML = [toml, yaml, json].map(data => `
<h1>${data.title}</h1>
<div>${data.owner.name}</div>
<div>${data.owner.organization}</div>
<div>${data.owner.bio}</div>
<div>${data.owner.dob}</div>
`;
`).join('<br><br>');

12
examples/custom-json-modules/template.md
View File

@ -8,6 +8,18 @@ Toml files can be imported like other modules without toml-loader.
_{{data.toml}}_
```
# data.yaml
```yaml
_{{data.yaml}}_
```
# data.json
```json5
_{{data.json}}_
```
# example.js
```javascript

20
examples/custom-json-modules/webpack.config.js
View File

@ -1,4 +1,6 @@
const toml = require("toml");
const json5 = require('json5');
const yaml = require('yamljs');
module.exports = {
module: {
@ -11,6 +13,24 @@ module.exports = {
return toml.parse(input);
}
}
},
{
test: /\.json$/,
type: "json",
parser: {
parse(input) {
return json5.parse(input);
}
}
},
{
test: /\.yaml$/,
type: "json",
parser: {
parse(input) {
return yaml.parse(input);
}
}
}
]
}

4
package.json
View File

@ -56,6 +56,7 @@
"jest-junit": "^8.0.0",
"json-loader": "^0.5.7",
"json-schema-to-typescript": "^7.0.0",
"json5": "^2.1.1",
"less": "^3.9.0",
"less-loader": "^5.0.0",
"lint-staged": "^9.2.1",
@ -83,7 +84,8 @@
"url-loader": "^2.1.0",
"wast-loader": "^1.5.5",
"worker-loader": "^2.0.0",
"xxhashjs": "^0.2.1"
"xxhashjs": "^0.2.1",
"yamljs": "^0.3.0"
},
"engines": {
"node": ">=10.13.0"

12
yarn.lock
View File

@ -2554,7 +2554,7 @@ glob@^5.0.15:
once "^1.3.0"
path-is-absolute "^1.0.0"
glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4:
glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4:
version "7.1.6"
resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
@ -3693,7 +3693,7 @@ json5@^1.0.1:
dependencies:
minimist "^1.2.0"
json5@^2.1.0:
json5@^2.1.0, json5@^2.1.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.1.tgz#81b6cb04e9ba496f1c7005d07b4368a2638f90b6"
integrity sha512-l+3HXD0GEI3huGq1njuqtzYK8OYJyXMkOLtQ53pjWh89tvWS2h6l+1zMkYWqlb57+SiQodKZyvMEFb2X+KrFhQ==
@ -6651,6 +6651,14 @@ yallist@^4.0.0:
resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
yamljs@^0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/yamljs/-/yamljs-0.3.0.tgz#dc060bf267447b39f7304e9b2bfbe8b5a7ddb03b"
integrity sha512-C/FsVVhht4iPQYXOInoxUM/1ELSf9EsgKH34FofQOp6hwCPrW4vG4w5++TED3xRUo8gD7l0P1J1dLlDYzODsTQ==
dependencies:
argparse "^1.0.7"
glob "^7.0.5"
yargs-parser@^10.0.0:
version "10.1.0"
resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-10.1.0.tgz#7202265b89f7e9e9f2e5765e0fe735a905edbaa8"