Front End

A collection of 8 posts

Service Worker 简明分享
Front End

Service Worker 简明分享

本文是一个公司内部分享会的产物,旨在用尽量少的字介绍 Service Worker Service Worker 和 PWA 的关系Service Worker 是浏览器的一个功能,PWA 是一个理念或标准,用来规范离线 Web 的行为。 Web Worker在说明 Service Worker 的使用方式之前,我们先简单说一下 Web Worker Web Worker 具体的细节可以参考阮一峰的:Web Worker 使用教程;

前端另一种多语言的实现思路
Front End

前端另一种多语言的实现思路

多语言i18n往常的做法是一个语言一个配置文件, 但是这样需要添加一个新的字符串时, 需要逐个打开许多个语言文件, 常常会漏, 并且每次修改一个字符都要编辑好几个文件. 我们换一种思路, 把 i18n 的多语言直接写在当前代码中,而不是写在配置文件中. 思路用一个方法,根据开发环境\当前浏览器语言去处理应该使用哪个字符串, 并且暴露设置当前语言的函数,以兼容 nodejs 端或者开发人员扩展其他语言. 该库仅仅不到 70 行代码, 实现一个精巧的i18fn. 使用安装 i18fn 库: $ npm i --save i18fn const i18fn

基于Brower-sync和Parcel的真正零配置打包工具
Front End

基于Brower-sync和Parcel的真正零配置打包工具

此文写于2018年,现阶段不推荐使用 Parcel,请安心使用 Webpack缘由Parcel 在 React 项目中还是需要配置 babel,transform-runtime, postcss, scss 等其他配置的,并且某些情况的热更新会失效,并且不方便忽略一些不需要打包的库, 不能和webpack一样地引用相对路径的资源文件, 所以有了这个基于 Parcel 和 browser-sync 的打包库。 如果您看了前篇 更优雅的使用 Parcel 进行前端项目的打包, 觉得繁琐, 以下步骤更简便的满足该篇文章的内容. 安装$ npm i

更优雅的使用 Parcel 进行前端项目的打包
Front End

更优雅的使用 Parcel 进行前端项目的打包

此文写于2018年,现阶段不推荐使用 Parcel,请安心使用 WebpackParcel 有着开箱即用的特性, 为我们初始化工程省却了许多时间, 但是零配置的特性导致我们比较不方便进行一些预处理, 这篇文章就带领读者解决一些我们常会遇到的一些问题. 只需要很简单的添加几个参数,就可以满足我们大部分的特殊情况. 在去年, Parcel 没有支持 SourceMap 的特性, 导致于无法进行断点调试, 从而很多团队没有在生产中使用 Parcel, 现在 Parcel 已经支持 SourceMap 的特性, 再加上可以很方便的编写插件去填补一些自定义的功能, 所以 Parcel 我认为已经可以在新项目的生产中投入使用了. 本文作者简单的编写了一个 parcel-plugin-change-file

You've successfully subscribed to 摄人心魄!