webpack 有没有模块可以计算 html 标签的 font-size 吗？

Question

没有用 webpack 以前，计算 font-size 的代码我都是放头部的，立即加载函数里面。现在用了 Vue 全家桶 + webpack，我会把这段计算代码放在 App.vue 的 created 钩子函数中。一直都这样用，没出过问题。

但是我觉得这个方法会不会有点笨，想知道会不会有 webpack 的模块能给 html 标签计算 font-size ？但是我搜了好久的确找不到。不知道各位的项目是怎么做的。也是这样把“脏代码”暴露出来吗？

px-to-rem 类的模块倒是很多，gulp 也有，但是计算 font-size 确实找不到，而且，用模块的话 font-size 就能写到 css 里而不是标签里了。

还有，计算 font-size 的 JavaScript 代码我是拷贝网易的，你们的代码是哪里拷贝的呢，有没有一个公共的项目代码是很多大公司大项目都用到的呢。

我只是觉得我这样“在网上随便拷段代码”然后“找个地方粘贴进去能跑就行”的做法不大规范。

Answer 1

看题主的问题，题主应该是使用了rem适配方案。什么时候计算：通过js计算html的fontSize的方式唯一依赖的是网页宽度能够获取到的时候，网页一打开，浏览器的窗口信息（clientWidth）就可以通过BOM获取到。所以当然是越早计算越好。不需要对这段代码打包的话，可以直接script引入head即可,当然需要放到viewport的meta标签后面，缩放会影响fontSize的值。当然对于webpack的项目来说这样引入有点另类，一般情况下，vue脚手架的项目可以放到入口文件main.js中，这个文件是一个js文件，用来引入vue框架，引入router,vuex等其他插件和实例vue的根节点，这些引入还没有包含任何业务，完全可以需要前置的业务放在这个文件中，比如题主的这个需要计算fontSize的业务。至于放到App.vue中也没有问题，因为对于vue的脚手架项目来说，App.vue是单文件组件的root节点下的第一个子节点，而且没有兄弟节点，只有子辈节点，父节点也只是用来初始化vue的根节点. 所以id=app的div没有特殊样式的话，其实也是不影响的。