ronami / minipack Goto Github PK

View Code? Open in Web Editor NEW

3.1K 40.0 314.0 26 KB

📦 A simplified example of a modern module bundler written in JavaScript

License: MIT License

JavaScript 100.00%

javascript parcel-bundler webpack example browserify modules commonjs es6-modules module-bundler es2015

minipack's People

Contributors

Stargazers

Watchers

Forkers

hamlim zoubingwu seapunk epps feikerwu roymiloh takahiro-saeki x-quad pikamuchu amitmbee umaar ericyang89 sach2211 liyann ankeetmaini shen5455 yangqin0607 hg-pyun leokang28 tarkay rkrupinski lee0741 rynxiao yuyang019 clmystes caroline73 matheus1lva kirankarki minzhang2020 zprial hsrobbv minglz mickey0524 congwenma fiftify lockround screetbloom erolaliyev mayank23 traviscooper daiyy2009 navimarella puvi034 zgstudy segmentationfaulter mikecodemikelife kvsur flcwl sdn2525 saikrishnakuyya suqcnn richterdennis cbbfcd shiiiiiiji taym95 heggy231 eshnil2000 sant0shg jiuniangyz terminatorheart ipeng6 mgdskr 406892700 webpack-cd erkver abdullahtariq1171 tronsoft dev-albin haiyangmin januszpl xyc anewcoder1992 ravitejaggithub yanlee26 brotherbb ycomputer iaminvictus1993 cindylugd ooboqoo cyan33 agarwalprashant iumog bokuang beace nukash cliyao chenerzhang gangadharjannu verrixkio carvetime kawhi66 xinleihuang sunapriloy biddwan09 feldbot saswatarabinda xiaolong2013 alfiedarko arpagrawal feynon

minipack's Issues

Add a `minipack.js` version, without comments

Sometimes you just want a TL;DR version, code only. Too many comments might make it hard to read the code...

how does webpack author think out these methods？

I want to know ,the data structure that is bundle function returned, and the bootstrap function.what does above ideas inspire from？

a module will be bundled twice?

I make another file named message2.js, and the content is as below:

import {name} from './name.js';

export default `hello2 ${name}!`;

and the run the script, the variable queue is as below:

[ { id: 0,
    filename: './../example/entry.js',
    dependencies: [ './message.js', './message2.js' ],
    code: '"use strict";\n\nvar _message = require("./message.js");\n\nvar _message2 = _interopRequireDefault(_message);\n\nvar _message3 = require("./message2.js");\n\nvar _message4 = _interopRequireDefault(_message3);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nconsole.log(_message2.default);\nconsole.log(_message4.default);',
    mapping: { './message.js': 1, './message2.js': 2 } },
  { id: 1,
    filename: '../example/message.js',
    dependencies: [ './name.js' ],
    code: '"use strict";\n\nObject.defineProperty(exports, "__esModule", {\n  value: true\n});\n\nvar _name = require("./name.js");\n\nexports.default = "hello " + _name.name + "!";',
    mapping: { './name.js': 3 } },
  { id: 2,
    filename: '../example/message2.js',
    dependencies: [ './name.js' ],
    code: '"use strict";\n\nObject.defineProperty(exports, "__esModule", {\n  value: true\n});\n\nvar _name = require("./name.js");\n\nexports.default = "hello2 " + _name.name + "!";',
    mapping: { './name.js': 4 } },
  { id: 3,
    filename: '../example/name.js',
    dependencies: [],
    code: '"use strict";\n\nObject.defineProperty(exports, "__esModule", {\n  value: true\n});\nvar name = exports.name = \'world\';',
    mapping: {} },
  { id: 4,
    filename: '../example/name.js',
    dependencies: [],
    code: '"use strict";\n\nObject.defineProperty(exports, "__esModule", {\n  value: true\n});\nvar name = exports.name = \'world\';',
    mapping: {} } ]

so the name.js will be bundled twice?

or it's not considered in the minipack?

thanks

here seems error

const graph = createGraph('./example/entry.js');

possibility of adding more introductory code regarding file loaders?

Hi! 😄 thank you for creating this project! It's a great way to understand bundlers more.

File loaders are also a heavily used feature provided by different bundlers. Would you accept very introductory code regarding loaders? Basically we could create a different example folder showing how minipack would work with file loaders.

Here's a gist with a very basic css file loader example (along with the generated bundle.js):
https://gist.github.com/mayank23/6163214ce6b7562bd300b9a79ef5dde4. (still needs explanation comments)

If interested I could make a PR for this. I feel that having some introductory examples of heavily used bundler features would immensely help also.

Thank you!!

Question on code comment: 'This loop will terminate when the queue is empty.'

Thanks so much for this simple example!
It really revealed the 'magic' behind javascript bundler for me.

There is a point I'm not quite understand though.

Regarding the for .. of loop in the createGraph function

minipack/src/minipack.js

Lines 115 to 117 in ce3b1b5

 // only has one asset but as we iterate it we will push additional new assets 

 // into the queue. This loop will terminate when the queue is empty. 

 for (const asset of queue) {

To my understanding, the loop will terminate when

there are no more child asset being pushed to the end of query
the code reached the end of query

which also means the the dependency graph was completed.
Hence the query will never be empty (there is at least one asset: the entry/main asset)
Or did I misunderstand something here?

translate plan of chinese

https://github.com/chinanf-boy/minipack-explain

ronami / minipack Goto Github PK

minipack's People

Contributors

Stargazers

Watchers

Forkers

minipack's Issues

Add a `minipack.js` version, without comments

how does webpack author think out these methods？

a module will be bundled twice?

here seems error

possibility of adding more introductory code regarding file loaders?

Question on code comment: 'This loop will terminate when the queue is empty.'

translate plan of chinese

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

Jobs

	// only has one asset but as we iterate it we will push additional new assets
	// into the queue. This loop will terminate when the queue is empty.
	for (const asset of queue) {