Блог

Я пишу библиотеку 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 из global??

На сайте webpack есть официальное руководство. Я рекомендую вам прочитать это.

Вот чит-лист. Добавьте два поля в свой webpack.config.js .

 webpackConfig.output.library = "RestApi"
webpackConfig.output.libraryTarget = "var"
  

Однако есть небольшая проблема. Поскольку вы экспортируете свой модуль как именованный модуль public_api.js , пользователь может получить к нему доступ только через window.RestApi.RestApi . Не экспериментируя, я не совсем уверен, как это решить.