在 Vue 项目中使用 JavaScript SDK答案

【问题标题】：Use JavaScript SDK in Vue project在 Vue 项目中使用 JavaScript SDK
【发布时间】：2020-12-28 23:08:09
【问题描述】：

我正在尝试在 Vue 项目中使用 ConvertAPI JavaScript SDK。首先，我使用npm安装它：

npm install --save convertapi-js

然后，我尝试像这样导入和调用它：

<script>
import ConvertApi from 'convertapi-js'
export default {
    created() {
        console.log(ConvertApi.auth({secret: 'secret'})
    }
}
</script>

但是，当我尝试使用它时，我得到了这个错误：

创建钩子时出错：“TypeError: convertapi_js__WEBPACK_IMPORTED_MODULE_1___default.a.auth 不是函数”

我需要以其他方式导入它吗？这是node_module的结构：

convertapi-js
│   README.md
│   package.json   
│   LICENSE
│
└───lib
│   │   convertapi.d.ts
│   │   convertapi.d.ts.map
│   │   convertapi.js
│   │   convertapi.js.map
│   │   
└───src
    │   convertapi.ts
    │   file-param.ts
    │   ...

【问题讨论】：

标签： javascript vue.js npm

【解决方案1】：

convertapi-js output 没有任何导出。它只是设置了一个名为 ConvertApi 的全局变量，因为它打算从 <script> 导入（例如，在您的应用程序的 <script> 之前）。

如果你想改用 NPM 安装的版本，你可以使用 Webpack 的 exports-loader 导出 ConvertApi 全局，这样你的 Vue 代码就可以导入它：

安装exports-loader：
```
npm i -D exports-loader
```

specify the loader inline:

import { ConvertApi } from 'exports-loader?type=commonjs&exports=ConvertApi!convertapi-js'

或configure Webpack 自动将exports-loader 用于convertapi-js：

// vue.config.js
module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: require.resolve('convertapi-js'),
          loader: 'exports-loader',
          options: {
            type: 'commonjs',
            exports: 'ConvertApi',
          },
        },
      ],
    }
  }
}

然后，在您的 Vue 代码中使用命名导入：

import { ConvertApi } from 'convertapi-js'

【讨论】：