【问题标题】:Custom node package does not provide an export named自定义节点包不提供名为
【发布时间】:2020-12-28 03:50:21
【问题描述】:

我觉得我已经尝试了所有方法,但似乎没有任何效果。

我创建并发布了以下模块:

Index.ts:

import ContentIOService from "./IOServices/ContentIOService";

export = {
    ContentIOService: ContentIOService,
}

ContentIOService 是以下文件:

import {SuperIO} from "../Framework/SuperIO";
export interface ICMSContentData {
    id: number;
    url: string;
    htmlTag: string;
    importJSComponent: string;
    componentData: string
}

export interface CMSData {
    id: number;
    url: string;
    htmlTag: string;
    importJSComponent: string;
    componentData: Object
}

export default  class ContentIOService extends SuperIO {

    private static instance: ContentIOService;

    public static getInstance(): ContentIOService {
        if (!ContentIOService.instance) {
            ContentIOService.instance = new ContentIOService();
        }
        return ContentIOService.instance;
    }

    public async GetContent(url: string) {
        const response = await super.get<ICMSContentData[]>(url, {});
        try {
            if (response?.parsedBody) {
                return this.ProcessResponse(response.parsedBody);
            } else {
                this.handleHTTPError(new Error("Error"))
            }

        } catch (e) {
            this.handleHTTPError(e);
        }

    }

    private ProcessResponse(ContentData: ICMSContentData[]): CMSData[] {
        let CMSData: CMSData[] = [];
        for (let i = 0; i < ContentData.length; i++) {
            CMSData.push({
                id: ContentData[i].id,
                url: ContentData[i].url,
                htmlTag: ContentData[i].htmlTag,
                importJSComponent: ContentData[i].importJSComponent,
                componentData: this.parseComponentData(ContentData[i].componentData)
            })
        }
        return CMSData;
    }

    private handleHTTPError(e: Error) {
        console.log(e)
    }


    private parseComponentData(parseAbleString: string): Object {
        return JSON.parse(parseAbleString);
    }
}

然后我将其构建在一起并将其捆绑到 /lib 文件夹中:

这是使用以下tsconfig构建的

  {
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": true,
    "outDir": "./lib",
    "esModuleInterop": true,
    "strict": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "**/__tests__/*"]
}

如果有必要,我也会发布我的Package.json

    {
  "name": "sdk-io-package",
  "version": "1.1.6",
  "description": "",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "scripts": {
    "test": "jest --config jestconfig.json",
    "build": "tsc",
    "format": "prettier --write \"src/**/*.ts\" \"src/**/*.js\"",
    "lint": "tslint -p tsconfig.json"
  },
  "keywords": [],
  "author": "Marc Rasmussen",
  "license": "MIT",
  "devDependencies": {
    "@types/jest": "25.2.2",
    "chai": "^4.2.0",
    "es6-promise": "^4.2.8",
    "isomorphic-fetch": "^2.2.1",
    "jest": "25.2.2",
    "prettier": "^2.1.1",
    "ts-jest": "^26.3.0",
    "tslint": "^6.1.3",
    "tslint-config-prettier": "^1.18.0",
    "typescript": "^3.9.7"
  },
  "files": [
    "lib/**/*"
  ]
}

我在我的私有 proget 服务器上发布这个模块并将它导入到我的其他项目中:

index.js 文件如下所示:

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
var ContentIOService_1 = __importDefault(require("./IOServices/ContentIOService"));
module.exports = {
    ContentIOService: ContentIOService_1.default,
};

然后在我的打字稿中导入它:

import {LitElement, html, customElement, property} from 'lit-element';
import {ContentIOService} from 'sdk-io-package';
@customElement('my-test-element')
export class MyTestElement extends LitElement {

    @property()
    text: string = "Hello world";

    render() {
        this.test();
        return html`
        ${this.text} 
    `;
    }

  async  test (){
        const instance = ContentIOService.getInstance();
        const data = instance.GetContent("https://httpbin.org/get")
        console.log(data);
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'my-test-element': MyTestElement;
    }
}

然后我运行我的应用程序(它构建时没有任何打字稿错误)并服务,转到浏览器,我收到以下错误:

Uncaught (in promise) SyntaxError: The requested module '../../node_modules/sdk-io-package/lib/index.js' 不提供名为 'ContentIOService' 的导出

我根本不知道我做错了什么。

小更新

当我在浏览器中查看 node_modules 文件夹时,我实际上没有看到 lib 中的文件夹,因此也没有看到模块?:

【问题讨论】:

  • export = { ContentIOService: ContentIOService, } 看起来很像 javascript 中的语法错误。
  • 哦等等,问题是使用打字稿......

标签: javascript typescript npm node-modules


【解决方案1】:
export = {
    ContentIOService: ContentIOService,
}

这不会导出名为 ContentIOService 的值。相反,它是具有名为ContentIOService 的属性的对象的默认导出。这两种情况不是一回事。

命名导出看起来更像这样:

import _ContentIOService from "./IOServices/ContentIOService";

export const ContentIOService = _ContentIOService;

您可以使用re-export 进行清理:

export { default as ContentIOService } from "./IOServices/ContentIOService";

【讨论】:

  • 第二种形式很漂亮。首先是不对的。如果没有重新导出默认语法,它将是 export {default as ContentIOService} from "./IOServices/ContentIOService";import ContentIOService from "./IOServices/ContentIOService"; export {ContentIOService}。不幸的是,如果它是类和模块语义,那么添加中间 const 中断 TS 似乎无论如何都可以工作
  • 对不起,当我说第二个时,我的意思是你的第二个版本很好,而不是第二个代码 sn-p。所以export ContentIOService from "./IOServices/ContentIOService" 就像你以前一样是今天的最佳选择。但是中间有const 的那个是关闭的。并且应该是中间 const 应该只是 ` import ContentIOService from "./IOServices/ContentIOService"; export {ContentIOService};. export { default as ContentIOService } from "./IOServices/ContentIOService"` 也不错
  • 不管怎样,我会投赞成票,期待一下,休息一下,连续两天。
猜你喜欢
  • 1970-01-01
  • 2019-09-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-01-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多