0

I'm working on my first TypeScript library (it's actually even my first JavaScript library) which is used in the front-end. In essence, it should expose a function which receives a DOM element and adds another DOM element to it as a child.

I would like to use Webpack to bundle the library and during configuration of it and TypeScript I stumbled across module systems. And they are confusing me.

In tsconfig.json I can define which module system should be used in the compiled code, if I understand correctly:

{
  "compilerOptions": {
    "module": "es6"
  }
}

And in the webpack.config.js I am able to set a desired target for my library using output.library.type, where I can again specify a module system:

module.exports = {
  output: {
    library: {
      name: 'my-lib',
      type: 'umd',
    }
  },

I only need my library to be installable via npm/yarn:

$ yarn add my-lib

And consumable via an an import statement like that:

import { myFunc } from 'my-lib';

So far so good, with these settings it seems to do what I want. But I don't understand what I am doing here. Hence the questions: What is the difference between the two module system configuration options (the one in the TypeScript config and the one in the Webpack config)? And what settings are appropriate for my use case?

robfuscator
  • 631
  • 1
  • 5
  • 13
  • 1
    Have you read [Typescript module](https://www.typescriptlang.org/tsconfig#module) and [Webpack output library type](https://webpack.js.org/configuration/output/#outputlibrarytype)? – jabaa Dec 02 '21 at 09:38
  • @jabaa yes, still confused. – robfuscator Dec 02 '21 at 09:39
  • 1
    TypeScript allows `imports` but not all browsers and engines allow you. `compilerOptions.module` describe how the TypeScript files are translated to JavaScript. You can use all [module methods](https://webpack.js.org/api/module-methods/) that are supported by Webpack. After translation, the project is bundled with Webpack and `output.library.type` describes the module loader. – jabaa Dec 02 '21 at 09:42
  • 1
    This question contains helpful information about `output.library.type`: [Output an ES module using webpack](https://stackoverflow.com/q/41289200/16540390) – jabaa Dec 02 '21 at 09:47
  • So do I understand correctly that for my use case, an ES module is what I want? – robfuscator Dec 02 '21 at 09:50
  • 1
    Yes, `import { myFunc } from 'my-lib';` is an ES module import. – jabaa Dec 02 '21 at 09:52
  • That already helps a lot. In your previous comment you mentioned the term "module loader". What is that exactly? – robfuscator Dec 02 '21 at 09:59
  • 1
    There was a time some years ago when JavaScript didn't provide functionality to load modules. A module is a package of code that you want to use in your code. People invented different non-standard loaders for modules. Later, a module loader was standardized. The standard module loader is ES modules. – jabaa Dec 02 '21 at 10:03
  • By _loading_ a module you refer to the process of "injecting" variables and functions from one file into another file? – robfuscator Dec 02 '21 at 10:06
  • I wouldn't formulate it that way, but we're probably speaking about the same. – jabaa Dec 02 '21 at 10:07

0 Answers0