seho
ohhhh all right
ok, look like so easy
this is pr: https://github.com/a7ul/esbuild-node-tsc/pull/36
sorry, Due to my negligence, I forgot to add the format option to config this is pr: https://github.com/a7ul/esbuild-node-tsc/pull/38 I have tested it and can package the code in esm format...
Fortunately I use chalk.js
简要描述圣杯布局和双飞翼布局的区别和你自己的理解；并实现它们圣杯布局和双飞翼布局都是经典的三栏布局，它们都是解决了，左右两列等宽，中间自适应的布局方式；中间的往往是最优先加载的，所以要把dom放在left和right前面；区别：为了不会造成中间的div的文字被旁边遮挡，圣杯布局采用的是父级div给padding-left和right限制，让字不会被左边和右边挡住；双飞翼布局是采用给中间的div添加一个小div，这个小div使用内边距；圣杯布局优缺点：优点：不需要添加dom节点缺点：圣杯布局的缺点：正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，如果将浏览器无线放大时，「圣杯」将会「破碎」掉。如图，当main部分的宽小于left部分时就会发生布局混乱。（maindiv {float: left;}.box {background: yellow;/* 圣杯布局 *//* padding-left: 200px; *//* padding-right: 200px; */}.middle {background: red;margin-left: 200px;margin-right: -200px;width: 70%;height: 100px;}.left {background: pink;width: 200px;height: 100px;margin-left: -70%}.right {background: blue;width: 200px;height: 100px;margin-right: -200px} 双飞翼布局...
理解：圣杯布局和双飞翼布局都是为了解决两边定宽，中间自适应且优先渲染的布局需求，那么为了自适应且优先渲染，必须要把中间的dom放在最顶端，以保证主要内容能最先被浏览器解析； 而圣杯布局的核心概念就是，通过父容器撑出左右2个 “预留区域” ![微信截图_20190818135602.png][1] [1]: https://www.yinzhuoei.com/usr/uploads/2019/08/1792369603.png 圣杯布局代码（在线调试）： https://codesandbox.io/embed/red-platform-vtrct 总结圣杯布局：圣杯布局的核心就是父盒子用padding预留区域，然后center设置宽100%，并且把中左右3个盒子浮动，由于浮动的效果且中间center的宽度沾满了全部，所以左右两个盒子会被“挤下去”，我们需要把2个盒子放到padding给它们预留的地方，左边盒子先使用margin-right负值100%移动到父盒子中心（和中盒子共享第一行，其实就是盖住了中盒子的一半，因为有浮动的原因脱离了文档流）然后再可以使用定位向左移动padding的宽度，就把左盒子移动到了预留的padding中了，右盒子就是直接给一个margin-right负值（父值得值就是预留的padding大小） 双飞翼布局 (在线调试) ： https://codesandbox.io/embed/elated-kilby-6vqjp 总结双飞翼布局：双飞翼布局的核心就是center通过包裹一个父元素，给父元素设置width： 100%和浮动，子元素用margin撑出其他两块的预留位置，然后在left和right上，通过margin-right负值进行移动到对应位置上； 两种布局方式的总结：个人来讲圣杯布局在dom上能够更清爽且更能让人理解，但是在css实现上比较复杂难懂，但是双飞翼布局在dom上没有圣杯那么容易懂，但是在css实现上更让人理解，不难发现，2种布局方式都需要引入一个div，因为（既要设置中间的浮动且可以设置宽度又能计算预留位置），基于双飞翼布局，我们可以通过calc函数（ie9已支持），把多余的div去掉，可以使用calc（100% - 400px）这样的方式就可以自适应啦，但是需要牺牲兼容性，同理还可以用border-box和flex布局，具体移步： https://www.jianshu.com/p/81ef7e7094e8 我的这次总结有少数代码和部分借鉴此处，尤其是给大家提供了不考虑兼容性情况下，如何用额外的方法布局；
html中link和@import的区别 link是一个html标签，import是css语法 执行顺序上，link在文档加载的时候就会被执行引入，而Import要等加载到本css之后才会加载import中的css 兼容性上，link是html标签，兼容所有浏览器，import是css2语法，所以在ie低版本上会有兼容问题 查询相关资料补充即修改: 加载顺序: link加载文档会被加载，import是等文档加载完毕之后，执行css的时候才会执行import 补充：link可以用js来操作dom，动态更改引入css内容，而import因为是css语法无法动态更改； 借鉴了大家的思想
请注意运行模式下，因日志输出、sourcemap以及未压缩源码等原因，性能和包体积，均不及发行模式。若要正式发布，请点击发行菜单或使用cli发布命令进行发布 21:57:27.282 小程序各家浏览器内核及自定义组件实现机制存在差异，可能存在样式布局兼容问题，参考：https://uniapp.dcloud.io/matter?id=mp 21:57:27.282 正在编译中... 21:57:28.448 ERROR SyntaxError: Unexpected token { 21:57:28.456 /Users/jjw/Documents/banks/InternetQuestionBank/node_modules/fork-ts-checker-webpack-plugin-v5/node_modules/fs-extra/lib/mkdirs/make-dir.js:85 21:57:28.456 } catch { 21:57:28.463 ^ 21:57:28.463 SyntaxError: Unexpected token { 21:57:28.470 at createScript (vm.js:80:10) 21:57:28.473 at...
解决方案在这里：https://ask.dcloud.net.cn/question/120549?notification_id-920812__rf-false__item_id-163835__answer_id-163835__single-TRUE#!answer_163835 只需要把运行程序的hbx的node环境更改为12+就可以了，hbx有一个内置的node版本太低导致一个依赖包编译失败。