分類‘技術技巧’

Webpack4.0.0(4.0.1)正式發布,最高提速98%

最近兩天前端界有個熱門話題,就是 webpack 發布了4.0.0版本,隨之又發布了4.0.1修復了4.0.0發現的bug,那么 webpack 4的發布到底有什么大改變呢?

詳見官方發布日志:

https://github.com/webpack/webpack/releases/tag/v4.0.0
https://github.com/webpack/webpack/releases/tag/v4.0.1

至于升級嘛,經測試,在 webpack 3.x基礎上升級至 webpack 4,首先出現的就是 UglifyJsPlugin、CommonsChunkPlugin 兩個插件的廢棄,改為內置提供,其余常用 loader(如file-loader、url-loader等)也都提供了想對應的兼容版本,升級 webpack 4后移除 UglifyJsPlugin 和 CommonsChunkPlugin 兩插件(以 optimization 配置取代),再逐一升級其余 loader,基本滿足需求。 查看更多...

Java命令行信息國際化輸出造成的困擾及解決

最近使用一個第三方開源程序,maven的項目,啟動前會跑一遍測試用例,以保障程序正確性,可在本地啟動的時候發現一直通不過,重復clean install多次無果。

本地-X打開maven日志,發現某個用例是根據java底層拋出的錯誤信息做比較,但由于是國外框架,用例都采用英文,而本地由于國際化原因,錯誤信息是中文,故此類直接拿java底層錯誤信息做對比的用例都會失敗。

解決方法 查看更多...

Spring Boot熱部署配置方案

最近朋友吐槽新公司使用Spring boot,不會熱更新,改個js都會重啟,嘗試及搜索后,總結下有三種方案:

1、使用springloaded

配置pom.xml文件新增如下:

maven

<!-- spring boot熱部署 -->
<!-- https://mvnrepository.com/artifact/org.springframework/springloaded -->
<dependency>
    <groupid>org.springframework</groupid>
    <artifactid>springloaded</artifactid>
    <version>1.2.8.RELEASE</version>
</dependency>

gradle

// https://mvnrepository.com/artifact/org.springframework/springloaded
compile group: 'org.springframework', name: 'springloaded', version: '1.2.8.RELEASE'

查看更多...

純CSS解決iOS下網頁不滿一屏header、footer隨頁面滾動問題

前端頁面開發或是現在日漸增多的Hybird APP應用開發中,經常遇到模擬原生APP界面效果不佳情況,固定header、footer便是其中一種。

涉及header、footer固定,主體部分可滑動,最初想法一般是

position: fixed

然而,iOS各種下input獲取焦點后fixed失效等一系列問題,致使我們不得不選擇另辟他徑。于是,我們這樣玩 查看更多...

iOS WebView加載網頁觸摸白屏bug排查及修復

最近兄弟團隊給提了一個bug,說他們iOS端的網頁,觸摸后很大幾率出現白屏,一開始我是很不信的,后面本地調試竟然更高概率發生。

首先,系統是iOS10、11,網頁是高度100%,中間部分越界滾動的一個常規效果,框架vue,不過感覺bug和vue關系不大,大概結構如下:

<body>
	<div id="app">
		<header class="page-header"></header>
		<div class="page-content"></div>
		<footer class="page-footer"></footer>
	</div>
</body>

由于希望得到平滑點的滾動,在中間滾動部分加了 查看更多...

一次關于換行符的問題解決

做程序的,大多應該都知道目前主流系統中,Windows、linux(unix)換行符的差異,最近就因為疏忽,搞了個很沒頭緒的bug。

寫node cli,由于是Windows下開發的,換行符默認CRLF,發布后也可以正常執行,唯獨使用mac的兄弟裝完發現運行cli命令提示如下錯誤

env: node\r: No such file or directory

各種調試私活不行,最后偶然發現bin入口文件是CRLF,嘗試改為LF,再次發布,一切正常。

這也是第一次受到換行符的影響,因為git提交時配置了自動轉LF,這次是因為publish到npm時還沒用提交到git倉庫,導致換行符出錯,直接不被mac系統識別。

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 查看更多...

使用cPanel主機部署基于composer、laravel的Web應用

因為希望在閑置cPanel主機上部署composer、laravel應用,簡單記錄一下(并非cPanel使用教程)。

1、登錄cPanel,在Domains一欄找到“附加域”,按照常規添加我們要綁定的域名,生成站點目錄。
2、SSH登錄cPanel主機(ip為主機ip,共享、獨享都可以,賬戶、密碼復用cPanel的賬戶、密碼),測試是否有全局安裝composer。
3、FTP或者SFTP連接主機,上傳必要文件,composer install/update,如果速度過慢,可以參照本地開發時做法,執行composer config -g repo.packagist composer https://packagist.phpcomposer.com,隨后繼續直至安裝完畢。 查看更多...

黑龙江22选5开奖