前端開發所踩過的坑
本文摘要
來自摩拜前端團隊 yingye ，如有不對地方請指正
本文主要分享構建和開發中遇到的坑：比如預編譯的支援、瀏覽器環境的 window 物件支援以及 ENV 的配置等等
歡迎關注本系列，留言分享 ssr 的一些經驗
構建問題
1如何在 head 裡面引入 js 檔案?背景: 在<head>標籤中，以 inline 的形式引入flexible.js檔案
移動端專案可以引入 flexible.js 來實現移動端適配Nuxt.js 通過 vue-meta 實現頭部標籤管理
通過檢視文件發現，可以按照如下方式配置：
// nuxt.config.js
head: {
script: [
{
innerHTML
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，通過 px2remloader 將 px 轉換成 rem在以前的專案中，是通過px2rem loader 實現的，但是在 Nuxt.js 專案下，新增 css loader 還是很費力的，因為涉及到vue-loader。
想到了一個其他方案：
可以使用 postcss 處理。可以在 nuxt.config.js 檔案中新增配置，也可以在postcss.conf.js 檔案中新增。
build: {
postcss: [
require('postcss-px2rem')({
remUnit: 75 // 轉換基本單位
})
]
},背景：給 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')
})
}
}背景：封裝了一個 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)背景：在專案中，設定 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、可以在公眾號【選單 - 日刊】上看到所有的日刊文章模板啦
2、日刊君也開通了知乎專欄 [前端新視野]：
https://zhuanlan.zhihu.com/c_141430263
一個一天就破 *k 關注的日刊號
一個立志把質量當生命的日刊號
一個大佬們都在關注的日刊號
...
分享給喜歡學習的小夥伴吧