前端团队日常笔记

843 阅读3分钟

同一个bug,test环境存在,dev环境不存在

解决办法:先判断两个环境代码是否一致,如果一致再判断是否是数据问题

项目工期短,需要开发新题型如何解决

在移动端app中,react项目加载sdk链接,其它团队外援不用熟悉当前项目,直接开发sdk,接收参数就可以

缺点:对于首屏加载速度要求高,不适合加载太多外链资源,外链资源多应先加载速度,

如果项目前端资源由app缓存到本地,还是可以考虑加载sdk

底层代码改动比较多,为了避免bug,gitlab代码如何直接团队review

解决办法:review gitlab直接review。 方法参见www.jianshu.com/p/5d764b52e…

修改android低版本白屏问题

原因:package.json 中某个插件自动小版本升级了,使用了const,let等语法,但是这个插件没有被添加到编译中

解决办法:

1 直接卸载高版本依赖,重新安装低版本依赖 或者项目应该锁版本号,这样依赖就不能自动小版本升级了

如何锁定依赖包版本号

1 其实锁版本不用那么复杂,不需要把库专门打包出来单独维护这样.只需要把 package.json 改成如下,就能实现锁版本了:

{
    "highchart":"4.0.0"
}

把前面的符号去掉,再跑一遍 npm install, 就会更新这个库到对应版本,不会自动升级了

2 npm shrinkwrap

npm shrinkwrap命令会在项目路径下创建一个npm-shrinkwrap.json文件。该文件中包含了当前项目中所有依赖包的版本信息。把该文件提交到git中。其他人在clone该项目执行npm install时,npm检测到该文件后会按照文件中的信息完整的还原出完全相同的依赖树。从而解决版本不一致问题。

具体使用方法如下:

npm install --save-dev react
npm prune
npm shrinkwrap --dev

注意:–dev参数告诉npm shrinkwrap要在输出中包含devDependencies的版本信息。从npm 4.0.1起,不在需要额外指定此参数。

3 使用yarn安装npm包 在项目目录中创建一个yarn.lock文件

使用方法如下:

yarn # 现有项目中使用yarn来创建yarn.lock
yarn init # 使用yarn新建一个项目
yarn add xxxx # 安装一个依赖包
yarn remove xxx # 删除一个依赖包

yarn还有一个很棒的特性就是可以缓存已经安装过的包。当再次安装时,直接从本地读取即可,可以极大的提高依赖安装速度。

4 使用package.lock.json文件来控制版本

npm版本要求:5.0.0以上

npm5.0以后,在项目中使用npm install安装之后 ,自动生成package.lock.json文件,这个文件内容其实与npm-shrinkwrap.json是一模一样。区别是package.lock.json在发布时不会上传到npm仓库中.

浏览器fetch请求,相对路径拼接规则不清楚导致接口请求报错

相对路径就是相对于html页面url的路径而不是相对于请求所在的js文件的路径

例如 html页面url为 www.demo.com/user/

1 请求地址为

url:'userInfo'

实际请求的url: www.demo.com/user/userin…

2 请求地址为url:'../account'

实际请求的url: www.demo.com/account

react-router 报pattern.charAt is not a function

原因:react路由不是字符串,开发人员当时给成了数字

js判断手机设备是哪个平台

var browser = {

  versions: (function () {

    var u = navigator.userAgent,

    app = navigator.appVersion;

    return {

      trident: u.indexOf('Trident') > -1, //IE内核

      presto: u.indexOf('Presto') > -1, //opera内核

      webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核

      gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核

      mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端      
      ios: !!u.match(/(i[^;]+\;(U;)? CPU.+Mac OS X)/), //ios终端

      android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器

      iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器

      iPad: u.indexOf('iPad') > -1, //是否iPad

      webApp: u.indexOf('Safari') == -1, //是否web应该程序,没有头部与底部

    };  
  })(),  

  language: (navigator.browserLanguage || navigator.language).toLowerCase(),

};
document.writeln('<BR/>语言版本: ' + browser.language);

document.writeln(' <BR/>是否为移动终端: ' + browser.versions.mobile);

document.writeln(' <BR/>ios终端: ' + browser.versions.ios);

document.writeln(' <BR/>android终端: ' + browser.versions.android);

document.writeln(' <BR/>是否为iPhone: ' + browser.versions.iPhone);document.writeln(' <BR/>是否iPad: ' + browser.versions.iPad);

document.writeln(navigator.userAgent);

未完待续

欢迎大家浏览讨论