Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/408.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
将Typescript库转换为单个全局javascript文件_Javascript_Typescript_Webpack_Tsconfig - Fatal编程技术网

将Typescript库转换为单个全局javascript文件

将Typescript库转换为单个全局javascript文件,javascript,typescript,webpack,tsconfig,Javascript,Typescript,Webpack,Tsconfig,我正在用以下结构编写一个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 R

我正在用以下结构编写一个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){
    .....
  }
}
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> {
    .....
  }
}
export { RestApi } from './lib/core/restApi.class'
store.methods.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){
    .....
  }
}
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> {
    .....
  }
}
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文件并从global访问RestApi类???

webpack的网站上有一位官员。我建议你读一下

这是备忘单。将两个字段添加到
webpack.config.js

webpackConfig.output.library = "RestApi"
webpackConfig.output.libraryTarget = "var"
不过还有一个短消息。由于您将模块导出为
public_api.js
中的命名模块,因此用户只能通过
window.RestApi.RestApi
访问它。没有实验,我不完全确定如何解决这个问题