npm link、yarn link及yarn workspaces使用

前端項目越來越大,成熟的團隊免不了分模塊開發再集成,有時候我們也會發布一些npm包用于拆分維護各種模塊,這種時候,在正式發布前,我們的包往往不太方便測試,比如要輸出bin等操作。

還好,npm以及后起之秀yarn都為我們提供了便捷的方式。

1、npm link/yarn link

在希望同步開發的組件包下執行(假設為component-a)

npm link
// or
yarn link

如果是npm,執行后如果項目沒有node依賴,會在根目錄創建一個空的node_modules,yarn則不會
查看更多...

使用yarn配置resolutions解決依賴錯誤

去年3月份,npm圈子發生過這樣一件事,一個不過 11 行的工具函數left-pad被作者從npm上撤下,所有直接和間接依賴它的包就這么齊刷刷掛了,包括babel和react-native這樣每天安裝數萬的熱門項目。而Azer刪除他所有的npm包又是另一個故事:Azer寫了一個工具叫kik發布在npm上,這天有個同名的公司律師找上門要求他刪掉,Azer不從,這律師就找上npm,npm把包的管理權限轉給了這家公司——當然,Azer就怒了,從npm上解放了所有自己發布的包。

事件之后,有人給出了類似問題的解決之道,使用npm的bundledDependencies。不過,很多庫作者并不會真的這樣用起來,于是,今天又碰到了類似的問題,vue前端界自然是人盡皆知,配套的vue-loader更可謂是必需品,就是在vue-loader里引入的一個庫——js-beautify,今天從1.6.14更新到了1.7.0,但是作者似乎寫了個bug,于是依賴于node構建的我們,出現了如此異常

Module build failed: Error: Cannot find module './lib/beautify'
//...

官方issue里便出現了如此景象 查看更多...

Jetbrains系IDE同一項目多Git倉庫操作

最近項目中涉及同項目下多git倉庫的操作,習慣命令行的同事建議寫腳本,習慣IDE的我當然是嘗試IDE操作咯,稍微模式一番后發現IDE還是沒讓我失望,下面簡單記錄下基本操作(以Webstorm為例)。

為了方便演示,建了幾個空倉庫,demo-root、demo-sub1、demo-sub2、demo-sub3,先拉去demo-root,作為頂層項目:

jetbrains-cvs-demo1

然后拉去第一個子項目放到demo-root下,以demo-sub1為例,依次拉取demo-sub1 查看更多...

工作五周年小記

不知不覺,已工作整五年。

五年,從一個懵懵懂懂的小畢業生到一個可獨擋一面的項目骨干,再到跳槽轉行又跳槽,最后又跳回老東家,認識到不少好的、不好的人或事,都一定程度上促進了我的成長。

還記得,從2012年8月27入職第一家公司,到2015年4月22第一次換工作甚至從做了三年的Java轉行前端,再到2016年5月18再次不甘平庸的跳槽做前端架構及leader,但企業太小始終折騰不過日漸衰敗的大環境,終于,在今年的4月23日公司研發解散了,幾經周折后,在5月18日又回到轉行做前端的第一家企業,做了更能挑起自己技術熱情的研發崗。 查看更多...

Kotlin Android擴展使用及流行框架支持

接上篇,整理一下Kotlin在Android平臺上應用的一些實例及方法。

Kotlin Android Extensions

Kotlin針對Android提供了Kotlin Android Extensions,可以很大程度上增強Android的開發體驗。
背景
相信每個Android開發人員都很清楚findViewById()函數,并且備受摧殘,毫無疑問,大量的findViewById()會造成代碼閱讀上的干擾和錯誤定位的難度,雖然有類似Butterknife之類的庫可以通過注解實現綁定,但在實際使用過程中還是要為每個變量增加注解,倘若出現大量注解,維護難度應該不亞于直接編碼,而其優點無非是代碼看起來簡潔了,但整體看似乎并不是特別優雅,且需要增加額外的運行庫。

現在,Kotlin Android Extensions插件給我們提供了更優雅的方法,且不需要額外引入運行庫,比如,我們的代碼可以像下面這樣寫: 查看更多...

是時候在Android開發中使用Kotlin了

早在2015年,就開始斷斷續續接觸Kotlin,最初是因為使用與Kotlin同公司的Intellij IDEA系列,從官網了解到Kotlin,也在博客記錄了《初識Kotlin》。去年2月份,Kotlin終于發布了1.0正式版,又一次引爆熱點,業內人員紛紛嘗試Kotlin開發Android等場景,也有人拿其與Groovy、Scala甚至Swift對比,但與Java相比終歸都是民間玩法。

直至今年5.18,Google 在 I/O 2017 上宣布 Android 加入了對 Kotlin 編程語言的支持,并將Kotlin語言作為安卓開發的一級編程語言。至此,Kotlin終于完全被IT界大眾所認識(據我所知,在此之前,很多使用Jetbrains系IDE的小伙伴,并不知道Kotlin的存在,也不知道自己日常離不開的IDE就是Kotlin開發的)。

有了Google的大力支持,相信未來必然像當年換ADT為Android Studio一樣順風順水,毋庸置疑,作為Android程序員的你,是時候開始嘗試在Android開發中使用Kotlin了。目前Android Studio 2.x可以安裝插件使用,Android Srudio 3.x之后將默認支持Kotlin。下面參考kotlinlang官方使用引導整理了簡單的引導教程,這里默認你是已經在使用Android Studio進行日常開發的程序員,細節將一帶而過。

安裝Kotlin插件

Kotlin插件與3.0版本的Android Studio捆綁在一起。 如果你使用的是較早版本,則需要安裝Kotlin插件。在Android Studio的插件管理中直接搜索安裝,安裝完成后重啟即可。 查看更多...

基于Vue.js的SSR方案之Nuxt.js

前端技術真是分分合合、合合分分,從前些年HTML、CSS、JavaScript混寫到模塊化的CommonJS、AMD、CMD,模塊多了影響加載,又有了grunt、gulp、webpack等打包工具,最后發展到現在類似Vue的單文件組件,表面來看,似乎更爽了,但這樣的模塊化還是要靠寫的人來把控了,稍有不慎,團隊還真有人把.vue玩成當年的.html。

今天要說的是最近了解的一款基于Vue.js的SSR框架——Nuxt.js,用過react.js的童鞋可能都或多或少接觸過Next.js,沒錯,這玩意和它是做同一件事的,正如前面所說,分分合合、合合分分,前后端分離好不容易在國內實施得火熱起來,可百度并不怎么認你的單頁App,且盲目使用之余,很多App文件過于龐大,以至于按需加載后首頁渲染性能還是不理想,面對這樣的問題,有SEO需求、對首屏渲染有提升要求的技術小伙伴們又在前端的小圈子里劃分出了服務端,也因此有了傳統型的express、koa、adonisJS等,但這并不能阻止我們前進的腳步,回到現實,當前火熱的react.js、angularjs、vue.js都有了服務器端渲染方案,于是因為工作用vue.js的緣故,接觸了Nuxt.js。 查看更多...

前端跨域問題及解決方案

對于絕大多數B/S系統開發者來說,"跨域"并不是什么陌生的詞匯,但也往往因為熟悉而忽略其本質。眾所周知,Web瀏覽器往往是不安全的,出于安全考慮,Netscape公司1995年在瀏覽器中引入同源策略(same-origin policy),目的是為了保證用戶信息的安全,防止惡意的網站竊取數據。目前,所有瀏覽器都實行這個政策,"跨域"問題也由此形成。

所謂同源,簡單的講,就是網址必須是同協議、同域名(主域、子域與不同子域都稱為非同域名)、同端口,兩個網址出現任一項不同則出現跨域。

受同源策略影響,出現跨域的情況,我們不能做以下三類事

1)不能操作cookie、LocalStorage(SessionStorage) 和 IndexDB
2)不能操作DOM
3)不能發送AJAX 請求

顯然,同源策略影響的不止是"惡意網站",合理的用途也受到影響。下面將介紹如何規避上面三種限制。
查看更多...

IDEA系列64bit啟動時Failed to create JVM…問題解決

大概2015年的時候,寫過一篇名為《合理使用Intellij Idea,提高開發效率,避免內存溢出》的博文,簡單介紹了自己在使用idea過程中解決操作界面卡頓等性能問題的方法。意外的是,近一年來百度來路每天都有二三十個搜idea內存優化找到上面提到的文章,可能國內最近使用idea的用戶越來越多了吧。

個人猜測,可能是因為當時版本的idea系列安裝時并不會提示用戶該軟件有64bit的入口,而且安裝后的快捷方式默認都是32bit,所以大部分用戶都是直接使用32bit做開發,而且很多用戶怨聲載道。而近一年的版本已經做了改進,如果系統是64bit,默認有復選框提示生成32bit、64bit的快捷方式,這樣一來,稍微有點計算機基礎的用戶,可能都會選擇使用64bit作為入口了。

隨之而來的,可能是對于內存的調優,但稍有不慎,可能出現Failed to create JVM:error code -1。

網上大部分介紹是說沒有配置JAVA_HOME,當然如果是非idea用戶,真有可能忽略了此步驟,但如果本身就是Java開發人員,基本可以忽略這個可能性(當然是在自己確認無誤的情況下)。接下來遇到這樣的問題,就不能看錯誤提示表象了,可能是改了配置,配置參數不對或者內存不夠,因為初始化最大內存750,作為開發人員,基本也可以忽略這個了。所以,只有一種情況,配置不對。

最新版的配置參數有所縮減,移除了-XX:MaxPermSize等配置項,基本如下(64bit) 查看更多...

Android系統Web字體/行高異常解決

相信做前端開發的朋友很多時候會遇到這樣的問題,設置行高來達到文本垂直居中的目的,但移動端會遇到略偏上或者偏下,通常情況下輕微的偏移可能出現于設備像素密度、容器高度、字體大小等原因,比如30px容器內放15px文字,就做不到完全居中,這個不在今天問題范圍,不再贅述。

今天的問題其實算是舊事重提,遇到這個問題,最初是在2015年了,當時團隊其他同事做混合app有類似問題,同事最終似乎是采用padding的形式取代了行高,但實際上這個還會引起一些問題,主要是Android系統設置字體后,WebView內字體大小深圳和字體相關的屬性都受到影響。

在去年4月份曾寫過一篇文章《QQ內置瀏覽器下網頁行高、字體大小顯示異常解決》,但是當時只注意到Android系統下手機QQ內嵌的瀏覽器,直至后期做自己的Android App使用WebView內嵌網頁,也發現了同樣的問題,經過翻閱網上資料案例,發現近期挺多類似文章和提問,主要原因是Android系統多使用sp作為單位,會根據用戶設置縮放字體。

常規的解決方法主要有以下兩種 查看更多...

黑龙江22选5开奖