分类‘技术技巧’

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,随后继续直至安装完毕。 查看更多...