前端開發所踩過的坑
本文摘要
來自摩拜前端團隊 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,通過 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 // 轉換基本單位
})
]
},
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、可以在公眾號【選單 - 日刊】上看到所有的日刊文章模板啦
2、日刊君也開通了知乎專欄 [前端新視野]:
https://zhuanlan.zhihu.com/c_141430263
一個一天就破 *k 關注的日刊號
一個立志把質量當生命的日刊號
一個大佬們都在關注的日刊號
...
分享給喜歡學習的小夥伴吧