前端开发所踩过的坑 - 好文

本文摘要

来自摩拜前端团队 yingye ，如有不对地方请指正

本文主要分享构建和开发中遇到的坑：比如预编译的支持、浏览器环境的 window 对象支持以及 ENV 的配置等等

欢迎关注本系列，留言分享 ssr 的一些经验

构建问题

1如何在 head 里面引入 js 文件?背景: 在 <head> 标签中，以 inline 的形式引入 flexible.js 文件移动端项目可以引入
flexible.js 来实现移动端适配
Nuxt.js 通过 vue-meta 实现头部标签管理

通过查看文档发现，可以按照如下方式配置：
// nuxt.config.js
head: {
script: [ {
innerHTML: 'console.log("hello")',
type: 'text/javascript',
charset: 'utf-8'
} ] }
结果，生成 html 如下:
<script
data-n-head="true"
type="text/javascript"
charset="utf-8">
console.log("hello")
</script>
发现 vue-meta 把引号做了转义处理，加入 __dangerouslyDisableSanitizers: ['script']
后，就不会再对这些字符做转义了。

注释：该字段使用需慎重！

接下来，要把 console.log("hello") 的内容替换成 flexible.js，配置升级之后如下：
head: {
script: [
{
innerHTML: require('./assets/js/flexible'),
type: 'text/javascript',
charset: 'utf-8'
}
], __dangerouslyDisableSanitizers: ['script']
}
踩坑成功，下一个坑...

2如何预处理器?背景：在组件中的 <template>、<script> 或 <style> 上使用各种预处理器加上处理器后，控制台报错<style lang
="sass">
.red color: red
</style>
这个问题解决方法非常简单，只需要安装这些依赖就好：
npm install --save-dev node-sass sass-loader
但是解决过程并不是很顺利的，在阅读中文文档时，忽略版本号，按照上面的提示进行操作，发现不能成功，最后发现了该解决方案。

中文文档的版本号过低，如需查看文档，一定要看最新版本的英文文档！

3如何使用 px2rem?背景：在 css 中，写入 px，通过 px2rem loader 将 px 转换成 rem
在以前的项目中，是通过 px2rem loader 实现的，但是在 Nuxt.js 项目下，添加 css loader 还是很费力的，因为涉及到
vue-loader。

想到了一个其他方案：

可以使用 postcss 处理。可以在 nuxt.config.js 文件中添加配置，也可以在postcss.conf.js 文件中添加。
build: {
postcss: [
require('postcss-px2rem')({ remUnit: 75 // 转换基本单位 }) ] },

4如何拓展 webpack 配置?背景：给 utils 目录添加 alias
刚刚说到，Nuxt.js 内置了 webpack 配置

如果要拓展配置，在 nuxt.config.js 文件中添加。

同时也可以在该文件中，将配置信息打印出来。
extend (config, ctx) { console.log('webpack config:', config)
if (ctx.isClient) {
// 添加 alias 配置 Object.assign(config.resolve.alias, {
'utils': path.resolve(__dirname, 'utils') }) } }

5如何添加 vue plugin?背景：封装了一个 toast vue plugin由于 vue 实例化的过程没有暴露出来，在哪个时机注入进去呢？
可以在 nuxt.config.js 中添加 plugins 配置，这样插件就会在 Nuxt.js 应用初始化之前被加载导入。
module.exports = { plugins: ['~plugins/toast'] }
~plugins/toast.js 文件：
import Vue from 'vue'
import toast from '../utils/toast'
import '../assets/css/toast.css'

Vue.use(toast)

6如何修改环境变量 NODE_ENV?背景：在项目中，设置 3 个 NODE_ENV 的值，来对应不同的版本。
development，本地开发；release，预发布版本；production，线上版本。其中，预发布版本比 production 版本，多出
vconsole。// package.json
"scripts": {
"buildDev": "cross-env NODE_ENV=release nuxt build && backpack build",
"startDev": "cross-env NODE_ENV=release PORT=3000 node build/main.js"
},
打印 process.env.NODE_ENV 依旧是：production。

在 backpack 的源码中，找到了答案：

在执行 backpack build 命令时，会把 process.env.NODE_ENV 修改为 production
，并且是写死的不可配置的...... （重写 backpack，恩~）

注意：lerna 来管理还是一个值得关注的工具

无奈下，只能在 process.env 下，添加 __ENV 属性，代表 NODE_ENV

这时，在页面中打印出来的信息 process.env.__ENV undefined，但是可以打印出 process.env.NODE_ENV。

可以通过配置 nuxt.config.js 中的，env 属性，解决该问题：
env: {
__ENV: process.env.__ENV }

开发问题

1Window 或 Document 对象未定义?背景: 在引入第三方插件，或者直接在代码中写 window 时控制台会给出警告，window 未定义。
发生在这个问题的原因时，node 服务端并没有 window 或 document 对象。

解决方法：通过 process.browser 来区分环境
if (process.browser) {
// 引入第三方插件 require('***')
// 或者修改window对象下某一属性 window.mobike = {} }

还不够，明天还有哦！！！

昨日的日刊是不是漏看了，给你一个传送门：

前端日刊 - 1/10
<https://mp.weixin.qq.com/s?__biz=MzU1MTQzOTQ1Nw==&mid=2247484168&idx=1&sn=cf65732eb5917c31abc3d4a4195d6c21&scene=21#wechat_redirect>

前天的也有：

[使用 nuxt 小伙伴请注意] 1.0.0 升级的问题
<https://mp.weixin.qq.com/s?__biz=MzU1MTQzOTQ1Nw==&mid=2247484161&idx=1&sn=392708f04acb9273d27994510899ee00&scene=21#wechat_redirect>

好消息：

1、可以在公众号【菜单 - 日刊】上看到所有的日刊文章模板啦

2、日刊君也开通了知乎专栏 [前端新视野]：

https://zhuanlan.zhihu.com/c_141430263

一个一天就破 *k 关注的日刊号

一个立志把质量当生命的日刊号

一个大佬们都在关注的日刊号

...

分享给喜欢学习的小伙伴吧

热门工具换一换