basarat/typescript-collections

Webpack build warning

Closed this issue · 5 comments

Hello,

Thank you for the great lib. We are using it with a new angular 2 project and it works great. Only issue we have is a warning we get with Webpack at this point. It looks like your package.json points to umd.js instead of index.js.

Here is the error we get:
typescript-collections/dist/lib/umd.js
Critical dependencies:
21:121-128 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.

Thanks,
TK

Hi @tilemachosk , thanks for using typescript-collections.

I'm not sure if I package.json'smain should point to raw index.js since applications written e.g. for node won't be able to use this library. That's what UMD is for.

I've found this https://github.com/webpack/webpack/issues/1617 but I'm not sure what should be changed.

Can somebody provide a solution to this?

The last comment here shows how to at least surpress the error:
webpack/webpack#1617

I think I know how to fix this. We need to make a separate dist directory for ES6 target build and point to it via jsnext:main in package.json.
Webpack (if configured correctly) will pick up the intermediate sources and compile them itself.

A similar option is to use the module entry in package.json and add a module build configuration that can be shared with webpack/ts-loader for exporting

"main": "build/main/index.js",
"module": "build/module/index.js",

then control the build target compilations via:

"build:main": "tsc -p tsconfig.json",
"build:module": "tsc -p config/exports/tsconfig.module.json",

and a top-level tsconfig.json

{
  "extends": "./config/tsconfig.flexible", // also available: "./config/tsconfig.strict"
  "compilerOptions": {
    "target": "es6",
    "outDir": "build/main",
    "rootDir": "src",
    "moduleResolution": "node",
    "module": "commonjs",
    "declaration": true,
    "importHelpers": true,
    "inlineSourceMap": true,
    "listFiles": false,
    "traceResolution": false,
    "pretty": true,
    "lib" : [
      "es6"
    ],
    "types" : [
      "node"
    ],
    "baseUrl": ".", // required for "paths"
    "paths": {
      "typescript-collections": ["src/index.ts"] // write tests without relative paths
    }
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules/**"
  ],
  "compileOnSave": false
}

and a tsconfig.module.json in /config/exports to extend for the module

    {
      "extends": "../../tsconfig",
      "compilerOptions": {
        "outDir": "../../build/module",
        "rootDir": "../../src",
        "module": "es6",
        "declaration": false
      }
    }

These ideas were inspired by Fredrik Andersson's post: Publishing a Maintainable NPM Module with Continuous Integration

Closing this because of old age. If the issue persists, please let me know.