工程化

  • 问题

    前后端同步开发的话总是会碰到这样的一个问题:前端需要等后端接口提供的数据。为了解决这个问题,一般有这么几个思路。

    1. 在前端代码中直接嵌入假数据。这种方法最笨拙,而且会使代码变得很不干净,而且后期还得删除假数据。
    2. 把数据写在前端json文件中,然后请求接口的时候请求的是json文件。这种方法要好一点,但是还是免不了污染了代码仓库,并且json文件也不好组织,因为路由和json文件很难一一对应上。
    3. 采用类似mock.js这样的库,它具有拦截ajax请求,以及返回自定义格式的假数据的功能。这种方法确实比之前要好多了,但是还是免不了在代码中遗留假数据。

    rap

    其实我们分析一下,我们想要的不过

  • 问题

    用了webpack有一段时间了,其实对webpack打包出来的bundle.js里面到底是什么,怎么实现的不了解,只是知道里面有一坨东西。恰好有同事研究到了这个,觉得非常有意思,所以自己也来研究一下。

    一个入口,一个文件

    // webpack.config.js
    module.exports = {
      entry:'./index.js',
      output:{
        filename:'bundle.js'
      }
    };
    
    // index.js
    console.log('index');
    
    // bundle.js
    /******/ (function(modules) { //
  • 问题由来

    在用redux进行某个项目开发的时候碰到这样的一个问题:我使用redux-devtools作为测试开发工具,像这样。

    index.js
    const Index = React.createClass({
    
      render: function () {
        return (
            <div className="container">
              {this.props.children}
              <DebugPanel top right bottom>
                <DevTools store={sto
  • 前言

    以前写代码一般只关注正确与否,但是随着技术的不断深入,开始重视代码规范与否,再加上进来着力推进团队的code review,所以有了eslint的这个探索,发现这是个好东西,跟大家分享一下。

    使用方法

    安装

    npm install eslint
    

    初始化

    eslint --init
    

    初始化之后会生成一个配置文件.eslintrc,所有跟eslint相关的配置都写在这儿。

    使用

    // 检查test1.js文件
    eslint test1.js
    

    踩到的一些坑

    因为目前我常用的技术栈是react+redux+webpack+babel+gulp,所以eslint势必要集成到这里面去。

    1.

  • 与终端的交互

    一种编程语言是否易用,很大程度上,取决于开发命令行程序的能力。
    忽然想搞明白平常用的那些npm包,它们是如何接受参数然后运行的。
    #1. shell.js

    关于nodejs如何调用shell进程,可以参考 #46 #47 ,里面介绍了两种方法。下面主要说一下shell.js一些比较方便但是不常用的方法。

    1. 检查某个文件夹是否存在
    shell.test('-d','path');  // 当path为目录,返回true
    shell.test('-e','path');  // 当path为目录或者文件,返回true
    
    1. 重写文件内容
    "string".to('file');