young-steveo / bottlejs

A powerful dependency injection micro container for JavaScript applications
MIT License
1.29k stars 67 forks source link

Add ES module build #129

Closed blikblum closed 4 years ago

blikblum commented 5 years ago

Currently bottlejs is distributed only as a umd module.

With an ES module build is possible to take advantage of tools like https://github.com/pikapkg/web

Its possible to have both builds (es and umd) by using module field: https://github.com/rollup/rollup/wiki/pkg.module

If deems appropriate i can help implementing it

young-steveo commented 5 years ago

Shouldn't be too hard to implement. I'll put it on the list. Thanks for the suggestion!

blikblum commented 5 years ago

I can create a PR. Just like to know the direction. Still use the current concatenation build through grunt or change to something like rollup?

young-steveo commented 5 years ago

For now it would be best to make a new grunt task; probably as simple as creating a new exports wrapper for es modules, concat the source and wrap it.

young-steveo commented 5 years ago

Maybe rename this file to umd.js and create a new one for es module as a sibling.

young-steveo commented 4 years ago

This has been merged and will be released as v2.0.0 (since it is a potentially breaking change for some webpack users)

kernwig commented 3 years ago

How does one make it work with webpack?

{
    "errorType": "TypeError",
    "errorMessage": "Bottle.pop is not a function",
    "stack": [
        "TypeError: Bottle.pop is not a function",
        "    at Object.call (/var/task/src/stacks/ingest/webpack:/node_modules/@sailplane/injector/dist/injector.js:165:26)",
        "    at __webpack_require__ (/var/task/src/stacks/ingest/webpack:/webpack/bootstrap:19:22)",
        "    at Object.call (/var/task/src/stacks/ingest/webpack:/src/stacks/ingest/state-change-lambda.ts:3:1)",
        "    at __webpack_require__ (/var/task/src/stacks/ingest/webpack:/webpack/bootstrap:19:22)",
        "    at /var/task/src/stacks/ingest/webpack:/webpack/bootstrap:83:10",
        "    at Object.<anonymous> (/var/task/src/stacks/ingest/state-change-lambda.js:1:1630)",
        "    at Module._compile (internal/modules/cjs/loader.js:999:30)",
        "    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)",
        "    at Module.load (internal/modules/cjs/loader.js:863:32)",
        "    at Function.Module._load (internal/modules/cjs/loader.js:708:14)"
    ]
}
kernwig commented 3 years ago

Solved above... it's a Typescript thing.

I simply changed the way I import bottlejs from:

import * as Bottle from 'bottlejs';

to

import Bottle from 'bottlejs';
kernwig commented 3 years ago

The above worked at runtime, but fails in JEST with TypeError: Cannot read property 'pop' of undefined when calling Bottle.pop.

I switched to const {Bottle} = require('bottlejes');. This lets my library compile and test with JEST, but then when imported by another project, JEST works but it fails at runtime with TypeError: Cannot read property 'pop' of undefined.

Library (https://github.com/onicagroup/sailplane/pull/100/files) and end project (an AWS Lambda) both use commonjs. No means of importing bottlejs v2 works for all scenarios.