我正在编写一个具有以下结构的 Typescript 库:
和文件内容:
restApi.class.ts
import { restApiOptions } from '../models/rest.options.model';
import { StoreMethods } from '../routes/store.methods.class';
import { UserMethods } from '../routes/user.methods.class';
export class RestApi {
public storeRest: StoreMethods;
public userRest: UserMethods;
constructor(private restApiOptions: restApiOptions) {
.....
}
setLanguage(langId: number){
.....
}
}
store.methodds.class.ts
import { Observable } from 'rxjs';
import { restApiOptions } from '../models/rest.options.model';
import { routeMethods } from '../core/routeMethods.interface';
export class StoreMethods implements routeMethods {
constructor(private restApiOptions: restApiOptions) {
.....
}
setLanguage(languageId: number){
......
}
getStore(storeId: number): Observable<any> {
.....
}
}
和public_api.ts
export { RestApi } from './lib/core/restApi.class'
该库旨在用作 Angular2+ 项目中的依赖项,因此我有一个 tsconfig 文件,其中包含下一个配置来转译它并生成定义文件
{
"compilerOptions": {
"outDir": "./dist/",
"declaration": true,
"module": "commonjs",
"target": "es5",
"lib": [
"es2017",
"dom",
"es2015",
"es5",
"es6"
]
},
"exclude": [
"node_modules",
]
}
我遇到的问题是这个库还需要以“老式方式”在普通的 es5 javascript 项目中使用,也就是说,将 javascript 库文件包含在脚本标记中并以这样的方式使用它:
var myRestApi = new RestApi(options)
我使用 webpack 将所有文件合并到一个 bundle.js 文件中,但生成此文件并将其包含在项目中后,我无法访问 RespApi 类。
这是我的 webpack.config.js
const path = require('path');
module.exports = [{
entry: './src/public_api.ts',
module: {
rules: [{
test: /\.tsx?$/,
use: [{
loader : 'ts-loader',
options:{
configFile : 'tsconfig.json'
}
}],
exclude: /node_modules/
}]
},
resolve: {
extensions: ['.ts', '.js', '.tsx']
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dev')
}
}];
有没有办法将库转换为单个 JavaScript 文件并从全局访问 RestApi 类?
最佳答案
官方有guide在 webpack 的网站上。我建议你读一下。
这是备忘单。将两个字段添加到您的 webpack.config.js
中。
webpackConfig.output.library = "RestApi"
webpackConfig.output.libraryTarget = "var"
不过还有一个缺点。由于您将模块导出为 public_api.js
中的命名模块,因此用户只能通过 window.RestApi.RestApi
访问它。如果没有进行实验,我不完全确定如何解决这个问题。
关于javascript - Typescript 库到单个全局 javascript 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55596827/