分类前端下的文章

admin 发布于 01月15, 2019

art-template-loader处理srcset

关于srcset,之前有文章提及过对它的处理,大概是这样的:

{
  test: /\.html$/,
  loader: 'html-srcsets-loader',
  options: {
    attrs: ['img:src', ':srcset'],
    minimize: true,
    caseSensitive: true,
    removeAttributeQuotes: false,
    minifyJS: false,
    minifyCSS: false
  },
  exclude: /^node_modules$/,
}

让我没想到的是,在打包出来后的页面中,还是有srcset没做处理的情况。分析了一把,发现原因是:

import xx from './xx.tpl'

const html = xx({a: 1, b: 2});
// 再把这个html片断插入某个DOM节点

阅读全文 »

admin 发布于 01月06, 2019

passport模块在koa中的使用

前阵子,技术群里面的哥们发了一个链接:meituan-app。今天闲来无事,研究了一下。

那个README感觉有所欠缺,需要打开mongod以及redis的服务才能跑。

在看代码的过程中,发现一个新大陆:passport。查了一下相关资料,它是一个权限认证中间件,能够把登陆认证和应用程序分离出来,从而保证了更清晰的代码结构。

阅读全文 »

admin 发布于 12月29, 2018

stylelint笔记

在github上有一个stylelint的账号:

alt

我们可以将其放到webpack中进行使用。

// webpack.config.js
const StyleLintPlugin = require("stylelint-webpack-plugin");

new StyleLintPlugin({
    context: "src",
    configFile: path.resolve(__dirname, "stylelint.config.js"),
    files: [
        '**/*.less',
        '**/*.scss'
    ],
    failOnError: false,
    quiet: true,
    // fix: true
})
// stylelint.config.js
module.exports = {
  extends: 'stylelint-config-standard',
  rules: {
    'color-no-invalid-hex': true,
    'string-quotes': 'single',
  },
};

eslint的用法其实是差不多的。

阅读全文 »

admin 发布于 12月06, 2018

webuploader的小坑

今天在帮同事定位一个IE8的:runtime error,利用调用栈,找到了是webuploader的问题。

翻了一下github issue,原因是本地没有装flash插件。但其实同事是装了的,于是猜测可能是flash版本的问题。

那么我们还需要在代码中处理一把,如果用户没装flash或者版本比较低,就提示让用户重新装。

阅读全文 »

admin 发布于 11月24, 2018

IE8的一些坑

这两天在处理IE8的bug,真的有点让人恼火。但其实解决之后,也会有一些心得。下面和大家分享一下碰到的两个坑:

坑一

export xx from 'xx'

这种写法在IE8下会直接TypeError('Accessors not supported!');(定位了好久,一把鼻涕一把泪)

react 项目的一个ie8兼容性问题,这篇文章中也有提到。

alt

解决办法,就是改成两句话:先import,再export

坑二

IE8下面上传图片组件webuploader,报栈溢出。

我排查了一个下午,丝毫没有头绪,很是抓狂。一个大牛同事教我使用堆栈。

话说,我也看了堆栈,但不知道去明细里面点一下,也是醉了。。orz!!

alt

看了这个错误,大概清楚了为什么栈会溢出了。原因是options里面有一个key,它的value是一个jquery对象,然后去for in,就会有很多。。。

alt

结语

上述两个坑都是一阿里P8在走之前挖的,因为之前的版本是OK的,知道要兼容IE8的,好歹测试一下兼容性吧。。

不过讲真话,是个开发就可能很不愿意打开IE8去看一下有没有问题。所以很多情况下都是前人挖坑,后人来擦屁股。

阅读全文 »

admin 发布于 11月16, 2018

nginx的记录(4)

背景:同事之前用的是nginx配置的后端,然后前端略微复杂一些,有backbone的,也有react的。react的用了webpack-dev-server。他希望能快速地打通这一条线,所以我给他的建议还是用nginx来转发服务。

就是nginx起到两个作用:

  • 转发页面请求到node(webpack-dev-server)
  • 转发API请求到java
server {
    listen       80;
    server_name  localhost;

    location / {
        root   html;
        index  index.html index.htm;
    }

    location /manage {
        proxy_pass   http://127.0.0.1:9008;
        proxy_redirect              off;
        proxy_set_header            Host $host;
        proxy_set_header            X-Real-IP $remote_addr;
        proxy_set_header            X-Forwarded-For $proxy_add_x_forwarded_for;
    } 
}

比如9008是我们开的node服务。那么这样的URL:http://localhost/manage/index.html,会转发变成http://localhost:9008/manage/index.html

问题来了,webpack-dever-server一般不会有manage这一层的,一般都是http://localhost:9008/index.html。所以要怎么干掉呢?

问了一下相关大神,只要这样配即可:

proxy_pass   http://127.0.0.1:9008/;

在URL后面加个/,它就会取最后的路径,不会带上manage了。

阅读全文 »