I have written a project on Typescript and setup to bundle it with webpack.
Main functionality is wrapped in one Main class, but it imports also other classes.
Need to export Main class and all dependent in to one bundle.js library to use in in other sites.
I've tried to bundle classes in separate project (without webpack just tsc).
this is tsconfig.json:
{
"compilerOptions": {
"module": "amd",
"target": "ES2015",
"declaration": true,
"outDir": "./dist",
"outFile": "./dist/index.js",
},
"include": [
"src/**/*"
]
}
but it is not usable since the error:
ReferenceError: define is not defined
compilled code contains edfine
define("Globals", ["require", "exports"], function (require, exports) {
and also with webpack but not sure have correct setup
the bundle file start with
(function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
in other words I have some classes:
Main.ts
A.ts
B.ts
C.ts
and I expected to get bundle.js file and use like this:
<script type="text/javascript" src="mylib/dist/index.js"></script>
//...
var a = new Main();
but stuck with understanding how it should Typescript and Jsvascript work together.
Will appreciate any help
Update:
Managed to solve with webpack. Main is asccessible from entry app.ts when compiled. So inside app.ts added window.onload handler and assigned class to window scope.
window.onload = function () {
window['MyClass'] = Main;
May be missing something but couldn't find good documentation about writing library on TypeScript for browsers.
Update2:
Ok. found answer. webpack option library works fine.
output: {
filename: "bundle.js",
path: __dirname + "/dist",
library: "MyMainClass"
},
also had to change tsconfig.json target option from es6 to es5
{
"compilerOptions": {
"baseUrl": ".",
"paths": { "*": ["types/*"] },
"lib": [
"dom",
"es6",
"dom.iterable",
"scripthost"
],
"module": "commonjs",
"target": "es5"
},
"exclude": [
"node_modules"
]
}
Related
I'm creating an Angular library and within tsconfig.lib.json I've added the following paths configuration:
"compilerOptions": {
"outDir": "../../out-tsc/lib",
"target": "es2015",
"declaration": true,
"inlineSources": true,
"types": [],
"lib": [
"dom",
"es2018"
],
"paths": {
"#fs/*": ["src/lib/*"]
}
}
However attempting to import things like:
import { Test } from '#fs/Test'
Does not work. Anyone know if Angular libraries support hte paths configuration option within tsconfig.lib.json?
Generally I use typescript-transform-paths to perform path transformation on the compiled result, and I was hoping Angular had baked something like this in for libraries?
Try using the following pattern in your tsconfig.json file :
"paths": {
"#services/*": ["app/path/to/services/*"],
"#components/*": ["app/path/to/some/deeply/nested/component/*"],
"#environments/*": ["environments/*"]
},
Then when importing:
import { yourServiceClass } from "#services/yourServiceClass";
I have a module that I would like to use in a different project. It is compiled using webpack3. In the second project I've linked to the first module and that seems to work, except when I require the module, it always comes back as an empty object.
tsconfig options
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true,
"outDir": "./dist",
"strict": true,
"allowJs": true,
"lib": [
"es2015"
]
}
}
dist/index.js (shortened)
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Test = /** #class */ (function () {
function Test() {
}
Test.prototype.test = function () {
console.log('works');
};
return Test;
}());
exports.Test = Test;
/***/ })
/******/ ]);
package.json (shortened)
{
"main": "dist/index.js",
}
What this boils down to is a module called "test", a class called Test that also includes a method called Test.
If I run module.exports on the first project, it's an empty object.
In the second project that has linked to it and has it in it's node modules.
const test = require("test");
console.log(test); // {}
If I copy the code from another node module, and paste it overtop of the dist/index.js, it does return what is expected.
Does the exported webpack config need to also be imported via webpack? I want it to be used in many projects regardless of if they are using webpack.
Thanks for any help, I feel like I'm almost have it but I'm not quite there.
maybe this github issue can help you
Can't require bundle on node.js
set these in the webpack config file
target: "node"
output.libraryTarget: "commonjs"
EDIT:
It's important to outline the package in your webpack.config
https://stackoverflow.com/a/44542254/3425961
I'm using TypeScript to generate a single outFile that compiles my modules, loaded with SystemJS. When I follow the documentation on loading bundles, as suggested by this SO answer, I get an error:
Uncaught (in promise) Error: Module instantiation did not call an anonymous or correctly named System.register.
Instantiating http://localhost:50001/Content/js/app.js
Loading app.js
at vendor.js?v=c419d08…:4
Here is the setup script in my index.html file:
SystemJS.import("/Content/js/app.js").then(function (mod) {
return SystemJS.import("admin/js/startup");
});
app.js looks like this:
System.register("shared/js/utilities", [], function (exports_1, context_1) {
...
});
System.register("admin/js/startup", ["shared/js/utilities"], function (exports_2, context_2) {
...
});
My tsconfig.json, if it helps:
{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"module": "system",
"outFile": "app.js"
},
"compileOnSave": true,
"exclude": [
"node_modules",
"wwwroot"
]
}
UPDATE: I had been using systemjs/dist/system-production.js, because the documentation states that modules already transpiled into the System.register format, which is done by TypeScript, can be loaded by the production loader. If I switch to using systemjs/dist/system.js, I do not get the errors. I still don't see how I am getting this error from the production loader if I'm already working with System.register formatted modules.
I am new in TypeScript, I wrote some simple classes and methods but I don't know how to access to them!
I used gulp via browserify, tsify to bundle my .ts files to one file.
Imagine the main class name is library and here is that:
import {something} from "./someWhere";
class libraryClass{
//Some code here too...
}
var library = new libraryClass();
var testVar = "TypeScript";
now when I compile and bundle my files to one .js file, what I have inside the code works as expected (such as console.log(s)), but, how can I access my libraryClass class? How can I access the methods inside libraryClass class?!
Accessing the libraryClass does not work, nor testVar
example:
console.log(library)
console.log(testVar)
Both returns
Uncaught ReferenceError: library is not defined Uncaught
ReferenceError: testVar is not defined
Here is my tsconfig.json:
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": true,
"lib": ["dom", "es2015.promise", "es5"]
},
"exclude": [
"node_modules"
],
"include": [
"src/**/*"
]
}
I would like to import an external module from node_modules in node using typescript using the import syntax. I've added the type definitions to my project so I can call install() without typescript returning errors (I know I can do an any cast require but I would obviously like to keep everything typed if possible).
/// <reference path="typings/source-map-support/source-map-support.d.ts" />
import * as sourceMapSupport from 'source-map-support';
sourceMapSupport.install();
However when my code is output it returns the following:
/// <reference path="../typings/source-map-support/source-map-support.d.ts" />
//# sourceMappingURL=server.js.map
Could someone explain to me why it doesn't output a require in the resulting js file? Also I'm compiling to ES6 as I need a access to the async & await keywords - my tsconfig.json is as follows.
{
"compilerOptions": {
"target": "es6",
"sourceMap": true,
"outFile": "build/server.js"
},
"exclude": [
"node_modules",
"typings"
]
}
Could someone explain to me why it doesn't output a require in the resulting js file
Because you are using outFile in tsconfig "outFile": "build/server.js". Don't use outFile if you are using a module format. That is a job a bundler e.g. webpack.
{
"compilerOptions": {
"target": "es6",
"sourceMap": true,
"module": "commonjs"
},
"exclude": [
"node_modules",
"typings"
]
}
PS
Note : There are edge cases here e.g. systemjs / amd support outFile. But that's not most likely not relevant here.