使用包時，報 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  
              
             
           

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