parcel-bundler / examples Goto Github PK
View Code? Open in Web Editor NEW๐ Parcel examples using various frameworks
๐ Parcel examples using various frameworks
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.
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>
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.
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() {
}
}
This example is not working at all.
Even if update parcel it will work only if launch this: 'parcel index.html'
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?
All big frameworks have an awesome-repo inspired from this
This could be renamed to awesome-parcel since it'll have all different frameworks know-how at one place...
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.
It doesn't console log anything, I don't think that it actually launches node.
Usually I use webpack + babel + react + mocha + chai.
Does Parcel has some simplified solution to setup test pipeline? I want to reduce setup duplication between parcel dev, prod and test environment to reduce chance of error.
can you make a node/client example?
Support is now in core rather than a plugin
Not sure if you want to link to this or import the whole project: https://github.com/DeMoorJasper/Angular-Parcel-Boilerplate
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?
vue-hot-reload-api would not be a development dependency?
Are there plans on moving examples to parcel v2?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.