ค้นหาเว็บไซต์

node.js - โมดูลที่ถูกบันเดิลด้วย webpack เป็นค่า undefined เมื่อถูกเรียกใช้โดย node


ฉันได้สร้างโมดูลอิโซมอร์ฟิกสำหรับ API ที่ฉันใช้บ่อย ๆ โดยใช้ TypeScript ฉันกำลังใช้ฟิลด์ module และ web ในไฟล์ package.json เพื่อบอก webpack ว่าจะต้องเรียกใช้อันไหน และใช้ webpack ร่วมกับ ts-loader และ babel เพื่อสร้างโมดูล ฉันไม่เจอข้อผิดพลาดใด ๆ ในระหว่างกระบวนการสร้าง แต่เมื่อฉันเรียกใช้โมดูลของฉันใน node กลับพบว่าโมดูลนั้นเป็น undefined ฉันไม่มีปัญหาเดียวกันเมื่อใช้โมดูลในเบราว์เซอร์

นี่คือการตั้งค่า webpack ของฉัน

var path = require('path');
var webpack = require('webpack');
var plugins = [];

plugins.push(new webpack.optimize.UglifyJsPlugin({ minimize: true }));

module.exports = [{
    target: 'node',
    entry: './src/index.ts',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'xmlmc.js'
    },
    resolve: {
        // Add `.ts` and `.tsx` as a resolvable extension.
        extensions: ['.ts', '.tsx', '.js']
    },
    module: {
        rules: [
            // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
            { test: /\.tsx?$/, loader: 'awesome-typescript-loader', exclude: /node_modules/, options: {
                useBabel: true,
                babelOptions: {
                    "presets": [
                        [
                            "env",
                            {
                                "targets": {
                                    "node": "6.10"
                                }
                            }
                        ]
                    ],
                    "plugins": [
                        "transform-object-rest-spread"
                    ]
                }
            } }
        ]
    },
},{
    target: 'web',
    entry: './src/browser/index.ts',
    output: {
        path: path.resolve(__dirname, 'dist', 'browser'),
        filename: 'xmlmc.min.js'
    },
    resolve: {
        // Add `.ts` and `.tsx` as a resolvable extension.
        extensions: ['.ts', '.tsx', '.js']
    },
    module: {
        rules: [
            // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
            { test: /\.tsx?$/, loader: 'awesome-typescript-loader', exclude: /node_modules/, options: {
                useBabel: true,
                babelOptions: {
                    "presets": [
                        [
                            "env",
                            {
                                "targets": {
                                    "browsers": [
                                        "FireFox <= 52",
                                        "Explorer 10"
                                    ]
                                }
                            }
                        ]
                    ],
                    "plugins": [
                        "transform-object-rest-spread"
                    ]
                }
            } }
        ]
    },

    plugins: plugins,
}];

นี่คือการกำหนดค่า package.json ที่เกี่ยวข้อง

{
  "name": "xmlmc",
  "version": "1.1.2",
  "description": "Wrapper for Hornbill Supportworks XMLMC API",
  "module": "index.js",
  "browser": "./browser.js"
  ...
}

และไฟล์ index.js

module.exports = require('./dist/xmlmc').default;

และไฟล์ index.ts

import {Connection} from "./Connection";
import {Session} from "./services/Session";
import {Data} from "./services/Data";
import {Admin} from "./services/Admin";
import {Helpdesk} from "./services/Helpdesk";
import {Knowledgebase} from "./services/Knowledgebase";
import {Mylibrary} from "./services/Mylibrary";
import {Reporting} from "./services/Reporting";
import {Selfservice} from "./services/Selfservice";
import {Survey} from "./services/Survey";
import {System} from "./services/System";
import URL = require('url-parse')

export type XmlmcOptions = {
    data?: {
        formatValues?: boolean,
        returnMeta?: boolean,
        rawData?: boolean,
        returnModifiedData?: boolean,
    },


}

export default class XmlMethodCall {
    protected connection: Connection;
    opts: XmlmcOptions;
    session: Session;
    data: Data;
    admin: Admin;
    helpdesk: Helpdesk;
    knowledgebase: Knowledgebase;
    myLibrary: Mylibrary;
    reporting: Reporting;
    selfservice: Selfservice;
    survey: Survey;
    system: System;

    constructor(server: string = 'localhost', port?: number, opts?: XmlmcOptions) {
        if (server.match(/^(http:\/\/)/)) {
            server = URL(server).host;
            port = 80
        } else {
            port = server.match(/^(https:\/\/)/) ? 443 : port;
            server = port === 443 ? URL(server).host : server;
        }

        const defaultOpts: XmlmcOptions = {
            data: {
                formatValues: true
            }
        };

        this.connection = new Connection(server, port);
        this.session = new Session(this.connection, this);
        this.data = new Data(this.connection, this);
        this.admin = new Admin(this.connection, this);
        this.helpdesk = new Helpdesk(this.connection, this);
        this.knowledgebase = new Knowledgebase(this.connection, this);
        this.myLibrary = new Mylibrary(this.connection, this);
        this.reporting = new Reporting(this.connection, this);
        this.selfservice = new Selfservice(this.connection, this);
        this.survey = new Survey(this.connection, this);
        this.system = new System(this.connection, this);
        this.opts = Object.assign({}, defaultOpts, opts);
    }


}