CODEWITHSUNDEEP
javascripttypescriptwebpacktsconfig
Diego Vega
Diego Vega

Reputation: 223

Typescript library to single global javascript file

I'm writing a Typescript library with this structure:

enter image description here

and file contents:

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> {
    .....
  }
}

and 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

{
"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:

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.

this is my 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??

Upvotes: 1

Views: 485

Answers (1)

hackape
hackape

Reputation: 19967

There's an official guide on webpack's site. I recommend you read it.

Here's the cheatsheet. Add two fields to your 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. Without experimenting, I'm not entirely sure how to solve this.

Upvotes: 2

Related Questions