Parcel: Using parcel but not pointing it at entry point

Created on 20 Apr 2018  ยท  3Comments  ยท  Source: parcel-bundler/parcel

Hello team,

What is the recommended approach for using parcel, but not pointing it at the outermost resource? For example, let's say I have a JavaScript module that exports a class Foo at foo.js. index.html should be able to include the output generated by parcel foo.js and then create an instance of Foo in inline JavaScript in index.html rather than any external bootstrap.js, etc.

The reason for this is that I would like to use parcel with an ASP.NET Core project, which has its own templating (cshtml). I need to output view-specific parameters to be passed in for the correct instantiation of Foo object.

I tried this:

export default class Foo {
....
}

and directed parcel at foo.ts as the entrypoint, which generated a foo.js that pulled in all the imports used by Foo, but unfortunately it does not seem to actually generate an export for Foo itself, as this in index.html does not work:

<script type="text/javascript" src="dist/foo.js"></script>
<script type="text/javascript">
var foo = new Foo; //Foo is not defined
//nor this
parcelRequire('Foo', foo => console.log(foo)); //module Foo is not found
</script>

I guess what I'm asking is how I can get parcel to package the entrypoint itself in a format that would be usable from plain JavaScript, without doing something like this in a file bootstrap.js:

import Foo from './foo';

(<any>window).Foo = Foo;

Just to expose module Foo for use in index.html:

<script type="text/javascript" src="dist/bootstrap.js"></script>
<script type="text/javascript">
var foo = new window.Foo();
console.log(foo);
</script>

I see in the parcel-generated JavaScript this line:

exports["default"] = Foo;

Is there any way to get to this export?

Question

Most helpful comment

Yes this works

mypackage.js:

var Test = function(){
}
exports.Test = Test;

package.json

  "scripts": {
    "build": "parcel build src/mypackage.js --global MYPACKAGE --out-file
mypackage"
  },
  "devDependencies": {
    "parcel-bundler": "git+https://github.com/parcel-bundler/parcel.git"
  }

demo/index.html

<script src="../dist/mypackage.js"></script>
<script>
var test = new MYPACKAGE.Test();
</script>

On 2 May 2018 at 18:05, Jasper De Moor notifications@github.com wrote:

Doesn't this PR fix this issue? #453
https://github.com/parcel-bundler/parcel/pull/453

โ€”
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/parcel-bundler/parcel/issues/1225#issuecomment-386049736,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AByOtbDYBOGjaROE7feTNy_tmHWdd8EVks5tuedtgaJpZM4TdvLg
.

All 3 comments

Same.

Yes this works

mypackage.js:

var Test = function(){
}
exports.Test = Test;

package.json

  "scripts": {
    "build": "parcel build src/mypackage.js --global MYPACKAGE --out-file
mypackage"
  },
  "devDependencies": {
    "parcel-bundler": "git+https://github.com/parcel-bundler/parcel.git"
  }

demo/index.html

<script src="../dist/mypackage.js"></script>
<script>
var test = new MYPACKAGE.Test();
</script>

On 2 May 2018 at 18:05, Jasper De Moor notifications@github.com wrote:

Doesn't this PR fix this issue? #453
https://github.com/parcel-bundler/parcel/pull/453

โ€”
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/parcel-bundler/parcel/issues/1225#issuecomment-386049736,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AByOtbDYBOGjaROE7feTNy_tmHWdd8EVks5tuedtgaJpZM4TdvLg
.

The last post is correct, that's exactly what parcel build index.js --global YourGlobalVariable is for.

Was this page helpful?
0 / 5 - 0 ratings