1. 程式人生 > >前端開發所踩過的坑

前端開發所踩過的坑

本文摘要

來自摩拜前端團隊 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(&quot;hello&quot;)
</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

640?wx_fmt=png

這時,在頁面中打印出來的資訊 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

0?wx_fmt=png

一個一天就破 *k 關注的日刊號

一個立志把質量當生命的日刊號

一個大佬們都在關注的日刊號

...

分享給喜歡學習的小夥伴吧