我为一个我经常使用的API建立了一个同构模块,用于打字稿。我正在使用package.json中的模块和web字段来告诉webpack需要哪些内容,并使用带有ts-loader和babel的webpack来构建模块。我在构建过程中没有遇到任何错误,但是当我在节点中需要我的模块时,我得到的模块是未定义的。我在浏览器上使用该模块时没有遇到同样的问题。
这是我的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);
}
}