最近做了一个导出功能,代码如下
import request from 'request-promise-native';
 export default class Form {
  // 导出
  @post('/export')
  public async export(ctx) {
    const params = JSON.parse(ctx.request.body.fields.params);
    const dataExport = await request({
      method: 'POST',
      uri: utils.url.org(ctx, '/v1/:route'),
      json: true,
      headers: {
        cookie: ctx.request.header.cookie,
      },
      qs: params.exportParam, 
    });
    await excel.export(ctx, params.tableName, params.column, dataExport.items);
  }
 }
报错
request_promise_native_1.default is not a function 解决方法:引入方式改为
import * as request from 'request-promise-native';
首先我们要明白一个前提,CommonJS模块规范和ES6模块规范完全是两种不同的概念。

看一下下面的 CommonJs module 和 ES6的module ,就可以懂了

CommonJS规范

Module 的语法

打印引入的request  查看不同的引入方式 request 值有什么区别

----1------------------------------------------- 
request-promise-native包的导出方式是:module.exports = request;
不同引入方式,打印结果:
1. import * as request from 'request-promise-native';
  打印request ,结果如下:
  function request(uri, options, callback) {
    if (typeof uri === 'undefined') {
      throw new Error('undefined is not a valid uri or options object.')
    }
    var params = initParams(uri, options, callback)
    if (params.method === 'HEAD' && paramsHaveRequestBody(params)) {
      throw new Error('HTTP HEAD requests MUST NOT include a request body.')
    }
    return new request.Request(params)
  } 2. import request from 'request-promise-native';
  打印 request 结果是 undefined
3. import {request} from 'request-promise-native';
  打印 request 结果是 undefined
 ----2------------------------------------------- 
如果 request-promise-native 包导出方式改为如下方式:
包导出: module.exports.request = request;  等同于 module.exports = {request};
不同引入方式,打印结果:
1. import * as request from 'request-promise-native';
  打印request ,结果如下:
  { request:
    { [Function: request]
    get: [Function],  head: [Function],  options: [Function],
    post: [Function],  put: [Function],  patch: [Function],  del: [Function],  delete: [Function],
    jar: [Function],  cookie: [Function],  defaults: [Function],  forever: [Function],
    Request: { [Function: Request] super_: [Object], debug: undefined, defaultProxyHeaderWhiteList: [Array], defaultProxyHeaderExclusiveList: [Array] },
    initParams: [Function: initParams],
    debug: [Getter/Setter] }
  }
2. import request from 'request-promise-native';
  打印 request 结果是 undefined
3. import {request} from 'request-promise-native';
  打印 request 结果如下:
  function request(uri, options, callback) {
    if (typeof uri === 'undefined') {
      throw new Error('undefined is not a valid uri or options object.')
    }
    var params = initParams(uri, options, callback)
    if (params.method === 'HEAD' && paramsHaveRequestBody(params)) {
      throw new Error('HTTP HEAD requests MUST NOT include a request body.')
    }
    return new request.Request(params)
  }
----3------------------------------------------- 
如果 request-promise-native 包导出方式改为如下方式:
包导出: module.exports.default = request;
不同引入方式,打印结果:
1. import * as request from 'request-promise-native';
  打印request ,结果如下:
  { default:
    { [Function: request]
    get: [Function],  head: [Function],  options: [Function],
    post: [Function],  put: [Function],  patch: [Function],  del: [Function],  delete: [Function],
    jar: [Function],  cookie: [Function],  defaults: [Function],  forever: [Function],
    Request: { [Function: Request] super_: [Object], debug: undefined, defaultProxyHeaderWhiteList: [Array], defaultProxyHeaderExclusiveList: [Array] },
    initParams: [Function: initParams],
    debug: [Getter/Setter] }
  } 2. import request from 'request-promise-native';
  打印 request 结果如下:
  function request(uri, options, callback) {
    if (typeof uri === 'undefined') {
      throw new Error('undefined is not a valid uri or options object.')
    }
    var params = initParams(uri, options, callback)
    if (params.method === 'HEAD' && paramsHaveRequestBody(params)) {
      throw new Error('HTTP HEAD requests MUST NOT include a request body.')
    }
    return new request.Request(params)
  }
3. import {request} from 'request-promise-native';
  打印 request 结果是 undefined -----总结----------------------------------------
导出:( = 右侧的 request 是一个function,从源码中得知)
out1: module.exports = request;  // 导出的是 function
out2: module.exports.request = request; // 导出的是对象 {request:function}
out3: module.exports.default = request; // 导出的是对象 {default:function}

引入:
in1: import * as request from 'request-promise-native'; // * as request => out1: request = function; out2: request =  {request:function}; out3: request = {default:function} => 导出的内容 = request
in2: import {request} from 'request-promise-native'; // request => out1: request = undefined; out2: request = function; out3: request = undefined => 解构赋值 
in3: import request from 'request-promise-native'; // {request} => out1: request = undefined; out2: request = undefined; out3: request = function => module.exports.default = 随意命名
 

查看不同引入方式的编译结果:

-----不同引入方式,打包编译结果-----------------------

request-promise-native 源码:

-------1-- module.exports = request -------------------------

request-promise-native 源码:最后一句导出 module.exports = request
左边 引入: import request from 'request-promise-native';
右边 引入: import * as request from 'request-promise-native';

打包后的结果是:

左侧引入方式 import request from 'request-promise-native';

程序报错: request_promise_native_1.default is not a function

如果引入方式改为 :import {request} from 'request-promise-native';

程序报错: request_promise_native_1.request is not a function

-------2-----module.exports.default = request----------------------

request-promise-native 源码:最后一句导出  若改成 module.exports.default = request;

左边 引入: import request from 'request-promise-native';
右边 引入: import * as request from 'request-promise-native'; 
左右两边编译后一样 request_promise_native_1.default 就是 request 所以不报错
打包后的结果是:

-------3------module.exports = {request}---------------------

request-promise-native 源码:最后一句导出  若改成 module.exports = {request};

左边 引入: import request from 'request-promise-native';
右边 引入: import * as request from 'request-promise-native'; 
以上两种方式引入,均报错
若引入方式改为:import {request} from 'request-promise-native';
则不报错, 导出成功
 
-----总结----------------------------------------
判断引入包A是否有default
in1: import * as A1 from A // 没有default: A1 = require(A) 使用:A1() ; 有default: A1_xx= = require(A) 使用: A1_xx.default()
in2: import A1 from A // 不管有没有default: A1_xx= = require(A) 使用: A1_xx.default()
in3: import {A1} from A // 不管有没有default: A1_xx= = require(A) 使用: A1_xx.A1()
 
import包的方式,由包的exports内容决定
 ----------------------------------------------------------------------------------
 

 -------4---------------------------

request-promise-native 源码:最后一句导出

module.exports = request;
若改成
export default request;

但是程序仍报错  SyntaxError: Unexpected token export

打包编译结果如下:左边import 右边 import * as , 结果是好的
 

 
现在我们使用 react, typescript
都会使用es6语法,创建class
使用如下方式导出 
export default class Form
export default new class {}
-----------------------------
typescript的.ts文件通过 tsc 命令打包 编译结果是

exports["default"] = new /** @class */ (function () {...}
所以直接 import 

-----------------------------


使用包时,报 xxx.default is not a function的更多相关文章

  1. linux下, 再次遇到使用thinkphp的模板标签时,报错used undefined function \Think\Template\simplexml_load_string() 是因为没有安装 php-xml包

    linux下, 使用thinkphp的模板标签,如 eq, gt, volist defined, present , empty等 标签时, 报错: used undefined function ...

  2. python踩坑系列之导入包时下划红线及报错“No module named”问题

    python踩坑系列之导入包时下划红线及报错“No module named”问题 使用pycharm编写Python时,自己写了一个包(commontool),在同级另一个路径下(fileshand ...

  3. 导入spark程序的maven依赖包时,无法导入,报错Unable to import maven project: See logs for details

    问题:导入spark程序的maven依赖包时,无法导入,且报错:0:23 Unable to import maven project: See logs for details 2019-08-23 ...

  4. nexus 私服 拉不了 jar 包,报 Not authorized

    问题: 无法下载导入jar包,idea reload 时 报: Could not transfer artifact com.xxx:parent:pom:1.0-SNAPSHOT from/to ...

  5. Android程序进行混淆,在导出签名apk包时出错!

    今天终于完成了近一个月的App开发工作,对程序进行混淆导出签名apk包时,却出现了如下的错误: Proguard returned with error code 1. See console Not ...

  6. iOS 导出 ipa 包时 三个选项的意义

    OS 导出 ipa 包时 三个选项的意思 如图  在 iOS 到处 ipa包的时候 会有三个选项 Save for iOS App Store Deployment Save for Ad Hoc D ...

  7. WireShark抓包时TCP数据包出现may be caused by ip checksum offload

    最近用WireShark抓包时发现TCP数据包有报错:IP Checksum Offload,经过查阅资料终于找到了原因 总结下来就是wireshark抓到的数据包提示Checksum错误,是因为它截 ...

  8. Maven项目pom.xml文件报xxx\target\classes\META-INF\MANIFEST.MF (系统找不到指定的路径)

    在今天的学习Maven项目中遇到的这个错误:pom.xml文件报xxx\target\classes\META-INF\MANIFEST.MF (系统找不到指定的路径) 在Maven项目学习中,缓存问 ...

  9. spark提交jar包时出现unsupported major.minor version 52.0错误的解决方案

    一.问题: 最近在spark集群上做一个项目,打包提交jar包时,出现了unsupported major.minor version 52.0的报错,而在local模式运行却能正常运行! 二.错误原 ...

随机推荐

  1. 数据结构入门第二课(浙大mooc)

    数据结构入门第二课 目录 数据结构入门第二课 引子 多项式的表示 方法1 顺序结构表示多项式各项 方法2 顺序结构表示非零项 方法3 链表结构存储非零项 多项式问题的启示 线性表 线性表的抽象数据类型 ...

  2. 一篇文章让你彻底弄懂SSL/TLS协议

    目录 SSL/TLS的应用 TLS协议的架构 握手协议 主密码和预备主密码 TLS记录协议 一篇文章让你彻底弄懂SSL/TLS协议 SSL/TLS是一种密码通信框架,他是世界上使用最广泛的密码通信方法 ...

  3. SpringCloud入门(十一):Sleuth 与 Zipkin分布式链路跟踪

    现今业界分布式服务跟踪的理论基础主要来自于 Google 的一篇论文<Dapper, a Large-Scale Distributed Systems Tracing Infrastructu ...

  4. c语言----实战植物大战僵尸

    1. 原理 通过指针先找到阳光的地址,然后修改地址对应的值即修改阳光值. 2. 工具 CheatEngine  --- 查询进程中变量的地址 Dll注入工具  -----  注入 VS2017 3. ...

  5. 华硕笔记本无法U盘启动,快捷键识别不了

    http://www.udaxia.com/upqd/8254.html 转载于:https://www.cnblogs.com/wanglinjie/p/10507888.html

  6. 解析HTML、JS与PHP之间的数据传输

    在电商网站搭建过程中,前端经常会向后端请求数据,有时候通过HTML.JS和PHP文件的处理来实现数据的连通.通常情况下,用户在HTML中做关键字操作,JS对提交的表单进行数据处理,向后端发起ajax请 ...

  7. TEC-004-php文件下载任意文件读取漏洞修复

    修改download?u参数值,将/public/files/14842030529.txt,替换为../../../../../../../../../../etc/passwd    functi ...

  8. JAVA_WEB--jsp语法

    JSP声明 一个声明语句可以声明一个或多个变量.方法,供后面的Java代码使用.在JSP文件中,必须先声明这些变量和方法然后才能使用它们. JSP声明的语法格式: <%! declaration ...

  9. Win10美吱er吱er,Win10修改默认字体的方法

    请参考以下步骤(需要修改注册表,修改前请先备份,以便在出现问题时能够及时恢复): 例:将系统字体改为宋体 1.Windows+r,输入:regedit 2.定位以下路径:HKEY_LOCAL_MACH ...

  10. 在Jetson TX2上捕获、显示摄像头视频

    参考文章:How to Capture and Display Camera Video with Python on Jetson TX2 与参考文章大部分都是相似的,如果不习惯看英文,可以看看我下 ...