[英]Typescript library to single global javascript file
I'm writing a Typescript library with this structure: 我正在使用以下结构编写Typescript库:
and file contents: 和文件内容:
restApi.class.ts 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 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> {
.....
}
}
and public_api.ts 和public_api.ts
export { RestApi } from './lib/core/restApi.class'
the library is intended to be used as a dependency in an Angular2+ project, so i have a tsconfig file with the next configuration to transpile it and generate definition files 该库旨在用作Angular2 +项目中的依赖项,因此我有一个tsconfig文件,具有下一个配置,可以转换它并生成定义文件
{
"compilerOptions": {
"outDir": "./dist/",
"declaration": true,
"module": "commonjs",
"target": "es5",
"lib": [
"es2017",
"dom",
"es2015",
"es5",
"es6"
]
},
"exclude": [
"node_modules",
]
} }
The problem i have is that this library also needs to be used in a plain es5 javascript project in an "old fashioned way", that is, including the javascript library file in a script tag and using it in a way like this: 我遇到的问题是,该库还需要以“老式方式”在普通的es5 javascript项目中使用,也就是说,将javascript库文件包含在script标记中,并以如下方式使用它:
var myRestApi = new RestApi(options)
I'm using webpack to combine all files into a single bundle.js file but after generating this file and including it in the project I don't have access to the RespApi class. 我正在使用webpack将所有文件组合到一个bundle.js文件中,但是生成此文件并将其包含在项目中之后,我无权访问RespApi类。
this is my webpack.config.js 这是我的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')
}
}];
is there a way to transpile the library into a single javascript file and accessing the RestApi class from global?? 有没有一种方法可以将库转换为单个javascript文件并从全局访问RestApi类?
There's an official guide on webpack's site. 在webpack网站上有官方指南 。 I recommend you read it.
我建议您阅读。
Here's the cheatsheet. 这是备忘单。 Add two fields to your
webpack.config.js
. 在
webpack.config.js
添加两个字段。
webpackConfig.output.library = "RestApi"
webpackConfig.output.libraryTarget = "var"
There's a short coming though. 不过很快。 Because you export your module as a named module in
public_api.js
, user can only access it through window.RestApi.RestApi
. 因为您导出模块在一个名为模块
public_api.js
,用户只能通过访问window.RestApi.RestApi
。 Without experimenting, I'm not entirely sure how to solve this. 如果不做实验,我不确定如何解决这个问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.