parcel-bundler / examples Goto Github PK

🛠 Parcel examples using various frameworks

CSS 32.04% JavaScript 22.83% HTML 21.39% Vue 3.46% TypeScript 14.81% Rust 1.63% Elm 0.78% Reason 3.07%

examples's Introduction

parcel-examples

🛠 Parcel examples using tools & various frameworks. To run an example:

# Install dependencies
yarn install
# Run the example
yarn start

Examples

Flow - static type checker

examples's People

Contributors

Stargazers

Watchers

examples's Issues

Preact build example doesn't work

I was trying to develop a Chrome extension using preact and parcel. The problem I ran into is the output of the bundle.

When using parcel src/index.html --open everything works nicely. But if you try to open the index.html generated by parcel build src/index.html you will encounter a blank screen with the following output in the console.

This simply happened by cloning the basic preact example and running the above commands. I already tried to remove the .cache folder.

The only thing that makes it "work" is to remove the character "/" from the tags in the output file index.html. In other words, from this:

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Preact Example</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="/main.c55ad16a.css" />
  </head>
  <body>
    <div id="app"></div>
    <script src="/main.5164aa10.js"></script>
  </body>
</html>

To this:

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Preact Example</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="main.c55ad16a.css" />
  </head>
  <body>
    <div id="app"></div>
    <script src="main.5164aa10.js"></script>
  </body>
</html>

Vue.version is undefined

run example ok, the console output is as below:

± |master ✓| → yarn start
yarn run v1.7.0
warning package.json: No license field
$ parcel
Server running at http://localhost:1234 
✨  Built in 1.20s.

but the html page is blank, and can see error in console as below:

Vue.version is undefined.

@Injectable()

right now in examples for angular one can't use providers due to Can't resolve all parameters error.

How to reproduce:
Create service and inject it in main module:

import {Injectable} from '@angular/core';

@Injectable()
export class TestService {

name = 123;

constructor() {
}

}

React + TypeScript example

It took me maybe 30 min to figure out this minimal example for React and TypeScript (link), would you find it useful to include the example here?

node/js example

can you make a node/client example?

Vue-Hot-Reload-API

vue-hot-reload-api would not be a development dependency?

Add Elm Example

Hey!
I was trying to make an elm example since Elm just got added to the list of assets parcel can compile:
https://medium.com/@devongovett/parcel-v1-10-0-babel-7-flow-elm-and-more-c20736553573

I have it up here: https://github.com/brooksbecton/elm-todomvc
It works if you run the build scripts and then run elm reactor
But, if I use parcel to then host the index.html it can't seem to see the Elm global to init the app.

Uncaught ReferenceError: Elm is not defined
    at (index):16

Here is the line on 16

var app = Elm.Main.init({

Any ideas on this?
I've seen some plugins to get this to work, but I thought maybe you could do this without them now.

Angular boilerplate

Not sure if you want to link to this or import the whole project: https://github.com/DeMoorJasper/Angular-Parcel-Boilerplate

Node example doesn't console.log

It doesn't console log anything, I don't think that it actually launches node.

vue sample is broken on github.com

It's like a case problem:

Move to Parcel 2

Are there plans on moving examples to parcel v2?

How to @import scss files from node module

Hi, is it possible to use @import in a scss file to import another scss file from a node module? Use case is importing a library scss.

React dist output wont load/isn't working?

The example will load on localhost but doesn't open when trying from 'dist/index.html'. Loading it from here wont work after npm run build or npm start. I am also having this problem with other React example with Parcel, whats causing parcels bundled files not to work from dist but work on localhost?