使用包时，报 xxx.default is not a function

最近做了一个导出功能，代码如下

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';

module.exports与exports，export与export default之间的关系和区别

首先我们要明白一个前提，CommonJS模块规范和ES6模块规范完全是两种不同的概念。

https://www.cnblogs.com/fayin/p/6831071.html

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

CommonJS规范

http://javascript.ruanyifeng.com/nodejs/module.html#toc1

Module 的语法

http://es6.ruanyifeng.com/#docs/module#export-default-%E5%91%BD%E4%BB%A4

打印引入的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

module.exports与exports，export与export default之间的关系和区别

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

CommonJS规范

Module 的语法

最新文章

热门文章