~~~
不止哦,JS 现在流行搞各种编译,拿到 AST 之后做骚操作。比如 React:
function App() {
return <h1>Hello World</h1>;
}
编译之后会变成
function App() {
return React.createElement('h1', null, 'Hello world');
}
然后还有一个 build 的重点就是 TreeShaking,这个操作会把一些不用的东西丢掉。比如一个库有两个函数,你只用了一个,他会在编译的时候把你不用的函数、常量全都丢掉,不会放到最终输出的 JS 文件中。
像 Vue、Solid、Svelte 这种编译更重的框架,做的事情就更多了,比如 Svelte:
<script>
let count = 0;
function handleClick() {
count += 1;
}
</script>
<button on:click={handleClick}>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
这么几行代码就实现了一个点击 +1 的按钮,他背后做的编译工作就很多,最后输出的 JS 有大几十行,感兴趣的话可以去官网上看,他有前后的输出代码对比,https://www.svelte.cn/