Skip to content

Commit 1cd5129

Browse files
🈚️小军🈚️小军
authored andcommitted
feat: 简易webapck 调试
1 parent 839f688 commit 1cd5129

File tree

4,790 files changed

+284784
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

4,790 files changed

+284784
-0
lines changed

index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
<script src="main.js"></script>
11+
</body>
12+
</html>

webpack/bundle.ejs

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
(function (modules) {
2+
function require (filePath) {
3+
4+
5+
let fun = modules[filePath];
6+
let module = {
7+
exports: {}
8+
}
9+
fun(require, module, module.exports)
10+
11+
return module.exports
12+
}
13+
14+
require('./main.js');
15+
16+
})({
17+
<% data.forEach(info => { %>
18+
"<%- info.filePath %>": function (require, module, exports) {
19+
<%- info.code %>
20+
<% }); %>
21+
22+
23+
}
24+
25+
})
26+
27+

webpack/dist/bundle.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
(function (modules) {
2+
function require (filePath) {
3+
4+
5+
let fun = modules[filePath];
6+
let module = {
7+
exports: {}
8+
}
9+
fun(require, module, module.exports)
10+
11+
return module.exports
12+
}
13+
14+
require('./main.js');
15+
16+
})({
17+
18+
"./examples/main.js": function (require, module, exports) {
19+
"use strict";
20+
21+
var _foo = require("./foo.js");
22+
23+
var _foo2 = _interopRequireDefault(_foo);
24+
25+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
26+
27+
console.log('main.js');
28+
(0, _foo2.default)('wujun');
29+
30+
"/Users/wujun/Documents/study/code_study/webpack/examples/foo.js": function (require, module, exports) {
31+
"use strict";
32+
33+
Object.defineProperty(exports, "__esModule", {
34+
value: true
35+
});
36+
37+
exports.default = function (val) {
38+
console.log('foo.js:', val);
39+
};
40+
41+
42+
43+
}
44+
45+
})
46+
47+

webpack/examples/bundle.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
(function (modules) {
2+
function require (filePath) {
3+
4+
5+
let fun = modules[filePath];
6+
let module = {
7+
exports: {}
8+
}
9+
fun(require, module, module.exports)
10+
11+
return module.exports
12+
}
13+
14+
require('./main.js');
15+
16+
})({
17+
'./foo.js': function (require, module, exports) {
18+
function foo (val) {
19+
console.log('foo.js:', val)
20+
}
21+
22+
module.exports = { foo };
23+
24+
}
25+
,
26+
'./main.js': function (require, module, exports) {
27+
const { foo } = require('./foo.js');
28+
console.log('main.js')
29+
foo('wujun');
30+
}
31+
})
32+
33+

webpack/examples/foo.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function (val) {
2+
console.log('foo.js:', val)
3+
}

webpack/examples/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
<script src='./bundle.js'></script>
11+
</body>
12+
</html>

webpack/examples/main.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import foo from './foo.js';
2+
3+
console.log('main.js')
4+
foo('wujun');

webpack/index.js

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import fs from 'fs';
2+
import parser from '@babel/parser';
3+
import traverse from '@babel/traverse';
4+
import path from 'path';
5+
import ejs from 'ejs';
6+
import { transformFromAst } from 'babel-core';
7+
8+
//创建模块
9+
function createAsset (filePath) {
10+
const source = fs.readFileSync(filePath, { encoding: 'utf-8' });
11+
12+
const ast = parser.parse(source, {
13+
sourceType: 'module'
14+
})
15+
// console.log('ast: ', ast);
16+
let deps = []
17+
traverse.default(ast, {
18+
ImportDeclaration ({ node }) {
19+
console.log('data: ', node.source.value);
20+
deps.push(node.source.value);
21+
}
22+
})
23+
24+
let { code } = transformFromAst(ast, null, { presets: 'env' })
25+
console.log('code: ', code);
26+
27+
return { filePath, code, deps }
28+
}
29+
30+
//创建图对象,广度优先搜索
31+
function createGraph () {
32+
let mainAsset = createAsset('./examples/main.js');
33+
let queue = [mainAsset];
34+
35+
for (const asset of queue) {
36+
asset.deps.forEach(relativePath => {
37+
let realPath = path.resolve('./examples', relativePath);
38+
// console.log('realPath: ', realPath);
39+
let child = createAsset(realPath);
40+
queue.push(child);
41+
});
42+
}
43+
44+
return queue;
45+
46+
}
47+
48+
// createAsset();
49+
let graph = createGraph();
50+
51+
52+
function build () {
53+
let template = fs.readFileSync('./bundle.ejs', { encoding: 'utf-8' });
54+
let code = ejs.render(template, { data: graph })
55+
// console.log('code: ', code);
56+
fs.writeFileSync('./dist/bundle.js', code)
57+
}
58+
59+
build()
60+
61+

webpack/node_modules/.bin/babylon

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

webpack/node_modules/.bin/browserslist

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)