node前后端同构的踩坑经历

项目背景

nodejs项目,webpack打包,用axios请求,Promise封装,nunjucks模板引擎;

之前已将nunjucks模板通过webpack打包策略,做成前后端共用;

目前需要将网络请求以及数据处理封装成service模块;

目录划分:

如上图所示:

将公共代码放到service中,整合两端共同的一些网络请求以及数据处理(node首屏,客户端再次请求数据更新等操作)

 

这里碰到的两个问题:

1. node模块使用module.exports,而webpack我们使用的是import/export,两者共用会报错;

2.我们使用了Promise做了两层封装(service封装、service中的fetch封装:抹平node和客户端的环境差异)

 

第一个问题,其实webpack也提供了module.exports的方法,所以两端的模块是可以共用的。

而第二个问题,我们使用了Promise,也在webpack全局引入了babel-polyfill,但是会报错:

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

导致前面的排查思路一直以为是module.exports出了问题;

 

解决方法

我们刚开始是通过引入es6-promise来解决的:

service/fetch.js:

var axios = require('axios');
var Promise = require('es6-promise').Promise;

module.exports = function(opts, request) {
  return new Promise(function(resolve, reject) {
    axios(opts).then(function(res) {
      res = res.data
      if (res.success) {
        resolve(res)
      } else {
        reject({ ___req: opts, ___res: res })
      }
    }).catch(function(err) {
      reject({ ___req: opts, ___res: err.data || err.stack || err })
    })
  })
}

 

service/wawa.js

var fetch = require('./fetch');
var Promise = require('es6-promise').Promise;

var getGamelist = function(params, req) {
  return new Promise(function(resolve, reject) {
    fetch({
      url: '/api/appeal/appealJoinOrderPage',
      type: 'get',
      params: params
    }).then(function(res) {
      resolve(res.data)
    }).catch(function(err) {
      reject(err)
    })
  })
}

module.exports = {
  getGamelist
}

 

并且我们也尝试在全局引入es6-promise,仍然报错;

这样我们暂时得出结论,是原生Promise语法,直接与module.exports冲突报错。目前只能通过在当前js中引入es6-promise来规避。

所幸的是,每个js中重复引入的es6-promise,在最终webpack打包的时候会去重,也避免了打包体积变大的问题。

至此,node前后端代码共用的方案暂时通过。并且后面还可以写除了service以外的共用代码,提升了复用性和可维护性。

 

再次踩到坑

我们在迁移另一个公用service的时候,又碰到原来的问题,精简后的代码如下:

/**
 * 获取红包列表
 */
var getRedList = function(params, req) {
  return JSON.stringify({a:1})
}

module.exports = {
  getRedList
}

纳尼?又报错

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

经过排查定位,发现是JSON.stringify不支持。。。但平时我们正常使用export/import从未碰到此问题。

所以猜测是module.exports出去的模块,在webpack中默认是不会给全局方法加上window的。

 

最终解决:兼容global和window(其实还不是最终)

那解决方法就容易了,给全局方法手动加上全局对象,兼容处理global和window就可以了:

(function(global) {
  let isBrowser = global.toString() === '[object Window]';
  /**
   * 获取红包列表
   */
  var getRedList = function(params, req) {
    return JSON.stringify({a:1})
  }

  module.exports = {
    getRedList
  }
})(typeof exports === 'undefined' ? global = window : global);

 

以上,得出在node和浏览器webpack共用模块化代码的解决方案:

1. 使用 module.exports / require 做模块化

2. 兼容处理global和window

 

打死不改终极奥义最终版

上周末线上突然报错飙升,发现集中在安卓4.3以下,报错:Promise is not defined

经过不断试错排查,发现在module.exports出去后,里边的 'es6-promise'兼容包,在外面是不生效的

最后决定在外边定义一个全局的Promise:

 

window.Promise = require('es6-promise').Promise;

 

此外,在低版本安卓中,判断window环境还有一个坑:

需要这么写

(function(global) {
  module.exports = function(opts, request) {
    var isBrowser = global.toString() === '[object Window]' || global.toString() === '[object DOMWindow]';

    return new global.Promise(function(resolve, reject) {
      if (isBrowser) {
        axios(opts).then(function(res) {

        }).catch(function(err) {
        })
      } else {
        axios(opts).then(function(res) {
          
        }).catch(function(err) {
        })
      }
    })
  }
})(typeof exports === 'undefined' ? global = window : global);

标红的那段是重点,划下来!!!

End

写到这里,已经做好了node项目代码复用的基础,那么整个接口的数据流程是怎么样的呢,又会碰到什么样的问题?

比如我们需要在两端调用service的时候必须获得同样的数据格式,而浏览器的请求实际是经过一次node接口转发,总共两次fetch流程产生的。

而且fetch模块,又需要支持浏览器和node的直接调用。所以我们整理出下面的接口请求流程图:

 

具体项目架构会在下一期文章给出。

posted @ 2018-01-25 22:49  暖风叔叔  阅读(2298)  评论(0编辑  收藏