#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 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??
Ответ №1:
На сайте webpack есть официальное руководство. Я рекомендую вам прочитать это.
Вот чит-лист. Добавьте два поля в свой webpack.config.js
.
webpackConfig.output.library = "RestApi"
webpackConfig.output.libraryTarget = "var"
Однако есть небольшая проблема. Поскольку вы экспортируете свой модуль как именованный модуль public_api.js
, пользователь может получить к нему доступ только через window.RestApi.RestApi
. Не экспериментируя, я не совсем уверен, как это решить.