What is Reddit's opinion of Parcel JS?

From 3.5 billion Reddit comments

I think I feel your desire for an alternative. I've tried some myself. After doing several frontend projects in 2018 I basically came to the following conclusions.

1. I generally try to use vue-cli, create-react-app, and nuxt.js/next.js when possible. They largely abstract away the need to deal with webpack. I find this route works for most projects.
2. If I am doing something more complicated that needs to get into the weeds I think that webpack is still king. It understands more and can be configured to do more than anything else I have tried. There is no doubt a learning curve, and the switch from 3 to 4 was absolutely a pain for me, but it's still an extremely powerful tool.
3. If I am doing something very simple I use Parcel. It's super easy to use (until it's not, but a lot of simple projects won't get there).

I actually think the future is in tools like Parcel. I look forward to it.

https://parceljs.org and https://rollupjs.org/guide/en are good alternatives.

Webpack is great though, though their docs definitely need some work. We’re still stuck on Webpack 3 because of the lack of documentation around Webpack 4 - it’s a little better now but on launch day there was almost no documentation at all.

Anecdotal of course, but I actually found JSX easier to grok than Vue directives. Which one is more approachable is just a matter of preference imo. React has a much smaller api but doesn't provide an all-in-one framework.

And there are plenty of zero-config options for React so you don't have to worry about Babel/Webpack/etc. See https://github.com/facebookincubator/create-react-app or https://parceljs.org/.

For a more detailed look at why you might choose React over Vue, check out this thread: https://www.reddit.com/r/reactjs/comments/7ch88y/what_can_react_do_that_vue_cant/

Projects like this are a great way to give yourself something to work on.

You might consider refactoring some of your files into more idiomatic javascript, or (even better) convert some to Typescript.

One thing you might do is use modules instead of pinning things to an ambient Main object and introducing temporal coupling paired to the order of the files in index.html.

Typescript can natively bundle things into a single file and spit it out in ES5. Other options are Webpack or Parcel.

STEP ONE “I can confirm require is being created in the .js file” Are you defining require yourself? If so delete that

STEP TWO Replace all of your const x = require(‘x’) (commonjs) with import x from ‘x’ (ES6 modules)

The beauty of ES6 modules is they are singletons

STEP THREE Bundle your code:

Parcel is incredibly easy to set up with typescript: https://parceljs.org/getting_started.html https://parceljs.org/typeScript.html

You don’t need to add more plugins to run typescript, parcel will just figure it out for you if it sees .ts or .tsx files in your project

STEP FOUR if that doesn’t work post your tsconfig.json file here

It's always a good idea to keep an eye out for tools that improve on existing tools.

Parcel is a good example of this. It basically gives you a zero config, get up and running quickly, alternative to spending time doing configuration.

It's actually the reason I use parcel. I can point it at a directory and it will get me 90% of what I need, without doing anything else.
parceljs.org

While often this error can be resolved by adding the type="module" attribute to your script tag, in this case that's not going to work for you because the import thing from 'package-name' syntax assumes that you are using a bundler to access the dependencies in your node_modules folder. The browser cannot (and, frankly, should not, for security reasons) root around in your project's directory to locate stuff in your node_modules folder.

Bundlers are a really important part of modern JS development and this is a good opportunity to try out using one for the first time. I'd recommend taking a look at Parcel, which is very simple to get started with.

I guess parcel.js (https://parceljs.org/) should solve this problem for you. It just work without (or with really minimum) configuration out of the box and even installs additional dependencies automatically. It has its own disadvantages though. You can not achieve with it as much as you can with Webpack.

It was a nice project to test some stuff. There's a bundler named parcel Js but no framework. it's html-css-js. The graph is made with apex-charts. i choose it because i was I was looking for something light. I just played with the options to find a nice line.
i can push the source code if you are interested to have a look... and thx for the kind words

Take a look at django-webpack-loader. It's not perfect, but makes it reasonable to embed webpack-generated assets in django templates. It's pretty much necessary if you want to use webpack's hotloading feature in development. In production, you won't need a separate server for vue, since webpack will compile your components into static js and css files. For a modern single-page app, some kind of bundling tool like webpack or parcel is highly recommended, since they do things like bundle dependencies downloaded via npm, minify/compress code, and eliminate dead code so your app loads quickly on slow connections.

I can't stand using webpack for simple(r) stuff so frequently on small hobby projects I'll reach for parcel instead. It has a lot to hate but it does let you get started very quickly.

Even for browser code you should be authoring with bundles in mind. As you posted above you can use type="module"or what is maybe more common would be using a bundler like Webpack or Parcel which takes all your module files and builds a single bundle with often just a single JavaScript file.

TL;DR Use modules everywhere you possibly can

Parcel does exactly what you're looking for, but keep in mind that it doesn't automatically set up your project for you like CRA does. That just doesn't really exist, outside of maybe using snippets and emmet in VSCode.

You either need to define typings for all of your exported types. Or (the less hacky way) you should start bundling your code instead of including lots of small files on your own. Take a look at Parcel

Have a look at the parcel bundler (https://parceljs.org/) and parcel-plugin-typescript. It's really easy to get started and requires almost no configuration!

Run

npm install --save-dev parcel-bundler parcel-plugin-typescript typescript

Create a tsconfig.json: json { "compilerOptions": { "module": "commonjs", "esModuleInterop": true, "target": "es5", "lib": [ "es6", "dom" ] }, "include": [ "./src/**/*" ] }

Create an index.html: html <!doctype html> <html> <head> <meta charset="UTF-8"> </head> <body> <script src="./src/index.ts"></script> </body> </html>

Finally, create the src/index.ts:

function add (...numbers: number[]) {
  return numbers.reduce((sum: number, n: number) => sum + n, 0)
}

console.log(`2 + 3 = `, add(2, 3))

Run with: npx parcel index.html

Create a static build with: npx parcel build --public-url=./ --detailed-report index.html

Hope that will get you started 😉

I used to use TSC to transpile down to JS but I recently started using Parcel for both front end and backend code.

Backend modules are built into a single file that can be run directly with node and a source map is generated by default to help with debugging.

You can setup ‘targets’ in your package.json file with different entry points and different output types, something like this:

‘’’ { … "targets": { "frontend": { "source": "./src/web/index.html", "distDir": "./dist/public" }, "backend": { "source": "./src/bin/backend.ts", "distDir": "./dist/bin", "context": "node", "engines": { "node": ">=12.x" } } } ‘’’

https://parceljs.org/features/targets/

My only niggle with Parcel is that it doesn’t do type checking so you have to either check for type issues in your editor or use tsc with the noEmit parameter to look for errors.

Some feedback about the new documentation: - Big logo on sidebar leaves less space for actual links - The font pairing (RedHat/Noto, sans-serif/serif) is a bit weird, you might as well use RedHat (Text and Display) for everything if you're gonna include both. - Search results are bad, replacing the stemmer altogether with fuzzy searching would be way more useful (e.g. the fzy algorithm is great) - I'd be happy to help, but I've taken a look at the repo and your build system and it all seems quite dated from a javascript development perspective, I'd at least bundle all the files in a single one and avoid using globals in multiple files by using a import/export syntax. If you're interested let me know I can open a PR with the adjustments above.

Use Parcel instead? Also a widely used build tool, but has a lot of opinions so you don't have to.

I like webpack. If you need to build JS, it's what I prefer, mostly because it's so well documented.

Here's a list on the different ways you've identified:

• src="images/file.png" look within the current directory.
• src="../images/file.png" look within the parent directory.
• src="/images/file.png" look within the site root.
• src="./images/file.png" look within the current directory.

Okay, so we notice that both images and ./images look within the current directory. The single dot . represents the current location. Which form to use is mostly personal preference.

If you're using a bundler or build process, it may handle images and ./images differently. Parcel bundler, for instance, treats ./images as relative to the current directory, but looks for images in a "node_modules" folder. (node_modules is created if you're using NPM or Yarn for JavaScript dependencies)

With /images, we're looking at the site root. Right now we're at

reddit.com/r/html5/comments/kku3pp/question_hreffile_vs_file_or_vs/

/images on the current page would look at reddit.com/images because reddit.com is the site "root".

webpack is a bundler, there is no relation to react. bundlers are responsible for taking your file structure, and (usually) generating a single bundle with all your code.

there are lots of other bundlers, some other popular ones might be rollup or parcel. any of these can be used to bundle react, some may have slight differences in philosophies, but the outcomes will be similar.

webpack is just one popular choice, so it's prevalent in a lot of build setups.

I don't really agree that js is inherently slow. The JIT in v8 can do some pretty impressive optimization and when your work is mostly IO bound it makes it more than fast enough for plenty of situations. In the case of electron the issue is using the entire chromium, js isn't actually the bottleneck here, or at least not as much as chromium being massive.

Don't get me wrong, it's still really nice to be able to use rust for computing intensive task, but presenting it as js being slow is a bit misleading I think. It's just much harder to write fast js.

For an even simpler rust integration you could use https://parceljs.org/rust.html which let's you import .rs files directly without having to setup wasm-pack

I'm not sure if this ticks all the boxes, but have a look at https://parceljs.org, you don't have to configure anything to get started. It supports most of what you're mentioning.

Most stuff will work natively without compiling, etc. if you do have stuff that needs to happen (imports are still dicey iirc) consider using Parcel. It is really good at just taking whatever shit you send it and making it just work.

https://parceljs.org/getting_started.html

>Try Parcel API Then you can fetch this information with apps script.

I'm pretty sure this is for the ParcelJS bundler (an NPM package that optimizes resources for distribution, usually for websites), not for tracking packages. Their API is for programmatic access like in an NPM script instead of calling the parcel CLI.

---

Your second suggestion seems on-point! Though IMO these delivery-tracking sites likely load information over AJAX, so you'll probably need to reverse-engineer that request to get at delivery status.

Take a crash-course in the languages you are interested in and when you want to start writing a demo website, take a look at parcel. It makes developing and bundling a frontend-project very easy, since you don't need to dig into all the configuration stuff that webpack and similar require.

When you have set up your project with parcel (which is done very quickly), you get a development server, which runs your page and automatically updates it when you change your code. With almost no configuration (having a tsconfig.json is always a good idea with typescript).

In order to use require statements in frontend code you need to use a bundler, something like Parcel or Webpack, both of which ship with the ability to import and parse JSON files to be used in your JavaScript.

I recommend parcel it's super easy to get started

I remember feeling totally overwhelmed by the ecosystem and tools as well. I'm not quite familiar enough with the Python ecosystem to make a comparison there, but In my case specifically, I don't feel like I've learned much about these tools beyond "Babel takes new or proposed syntax and converts it to more widely compatible syntax" and "webpack can transform and minify your code (including CSS) and make it ready to ship" - and that's been enough. When I run into a new challenge or issue with them (which is rare), then I start googling. Just-in-time learning really applies here.

I've spent so little time working on Babel and Webpack configs just because the tooling in the frameworks that I've experimented with is so great. Create React App for example handles all of that for you.

If you want to learn JS - I'd recommend just starting with HTML and a <script> tag. Getting deep into the tooling can overwhelming and not fun. If you're using a modern browser you can use all of the modern syntax. If you do start to run into limitations then you can look into using something like Parcel which is super easy to get started with.

I would say https://parceljs.org/ could be very close to codepen locally.

For simple html/css/js even with preprocessors etc. it's totally sufficient, anything more complex I would rather look into webpack.

Well yes, but Parcel has it too. And it is zero-configurable, + supports hoisting which makes a bundle so tiny compared to Webpack output. (in v2 and in v1 with a flag)

If you have little experience in webdev, I recommend parceljs. It’s a bundler with sane defaults, so basically you can run parcel build index.html and forget about bundling!

It’s really awesome, I really recommend it. Actually surprised nobody has already mentioned it — It’s that good.

No starter. For small to medium size apps, I just use parcel - https://parceljs.org/recipes.html#react

It provides hot module reloading and typescript support out of the box with no configuration and no boilerplate.

You're looking for sass-loader which is used to compile sass to CSS. Here's an example boilerplate where it's preconfigured.

If you're interested for an easier solution over Webpack, Parcel might be worth a look.

Kitson said in Deno's Gitter room:

> I think the target isn't just "plugins"... Both WASM and Rust should be targets for solving "hot" code paths in Deno. We have done it with source map re-writing, but we want to get to a point where there is low friction to including Rust code as part of the workload you would run under Deno.

You can apparently already do something like this with Parcel; I imagine the result might end up looking quite similar.

If you just want your app to reload when you make changes, Browsersync is definitely what you want.

If you're looking to get hot reloading (where your code updates but state is maintained), you should definitely take a look at ParcelJS. Webpack is great, and you should definitely learn it at some point, but for little projects or experiments that you want to get going on quickly, Parcel is exactly the right choice. It'll automatically install dependencies when you add imports, refreshes the browser window on changes (like Browsersync), and supports hot module replacement out of the box with very minimal setup.

> Parcel silently ignores TypeScript errors for some reason

This is expected and documented behavior: https://parceljs.org/typeScript.html

> Parcel performs no type checking. You can use tsc --noEmit to have typescript check your files.

We also have this setup for our frontend / backend.

You can pass in the backend service urls as flags to the Elm app, and then you can reference these as environment variables in JS files (e.g. `process.env.API_URL`)

Parcel has some default rules for which .env file it will load https://parceljs.org/env.html

We have:

`.env.local`
`.env.dev`
`.env.staging` etc

Hope that helps.

If you are planning on using es6 features, including babel is a natural step to that. I would advise against going through the transition to es6 without the use of babel or something similar. It's not very difficult. If you don't want to use webpack you can use parcel which requires no configuration besides your .babelrc file. PM me if it sounds interesting, I assure you it is very feasible.

If you’re just dealing with js/css and staying fairly straightforward in your needs then Parcel is a game changer (coming from Grunt/Gulp).

Parcel

When your needs get more complex Webpack, though it comes with a learning curve, is very powerful.

(I still love and use Gulp for small projects sometimes)

Every try reading bug reports(rando pick) in Parcel's github? It'll make you want to throw chairs. Everything has little emoticons in front of it and this is mimicked throughout the webpage for it as well. It's like everything needs to have an icon associated with it.

You should check out the Parcel Bundler, it's what CodeSandbox uses by default. Everything just works, you only need to specify the input file and you're ready to go. It does allow room for customization despite being zero-config by default, but most of the time you won't need to do so. I've fully switched from webpack and get almost the same functionality without having to worry about boilerplate code or configs.

I'd suggest you have a look at Parcel JS as an alternative to create-react-app. It allows you to basically do this:

import { add } from './add.rs' console.log(add(2, 3))

Where add.rs is a file:

#[no_mangle] pub fn add(a: i32, b: i32) -> i32 { return a + b }

You can also import Cargo projects too.

Do we really need a helper for parcel to create React apps?

It's pretty trivial to do this in parcel, what's this project adding?

https://parceljs.org/recipes.html#react

> People love the words "performance" and "rust" and "webassembly"

Well... if your client-side code actually needs the performance(handling some processing/calculations client-side rather than requesting the server to do it or it's a recurring calculation and JS is too slow to get it at the desirable rate(Eg FPS)), then yeah performance is a meaningful thing, and wouldn't you know WASM is a pretty great solution for some of those cases.

So "performance" with "rust" and "webassembly" makes sense now right? But why all three together? Because Rust is one of the best options out there atm for WASM payloads. Bundlers can make using WASM pretty easy, and with Rust you can just reference the <code>.rs</code> files for seamless integration(you don't even have to do extra work to create the wasm build).

But like yeah... kind of silly if you don't need the performance or other assurances that you'd get from another language delivered via WASM(along with limitations that can impose).

> Re-writing a library in a new language isn't particularly hard or novel work

Largely depends on what that library is.

I rejected it (and used https://parceljs.org/ instead) until I had to, for bundling a chrome extension (needs multiple entry points).

It's declarative, like an agonizing nested scream.

> I would have to see how it performs in js before even considering adding back all the headaches of polyglot full stack <shudders>.

Care to share the issues you had? I've yet to explore FFI with node. I haven't done any projects yet where my Rust code would be relevant to use with a Node project, although Parcel does make it look rather easy(I don't even think it's via FFI, seems to be using WASM so it works in the client/browser too).

JS: // synchronous import import { add } from './add.rs' console.log(add(2, 3)) // asynchronous import const { add } = await import('./add.rs') console.log(add(2, 3))

Rust add.rs file: #[no_mangle] pub fn add(a: i32, b: i32) -> i32 { return a + b }

If you want this to work anywhere then you'll need a module loader. If you don't want to deal with Webpack then you can get up and running REALLY easily with Parcel.

1. npm install -g parcel-bundler
2. npm init inside your project directory
3. touch index.html with a script tag to ./index.js
4. parcel index.html
5. profit

Seems to https://parceljs.org/getting_started.html#multiple-entry-files although I don't use multiple entries. I haven't used parcel in many large application but it seems to perform fine. Then again, I don't stray much from my TypeScript, SASS, React environment, although it does seem to work with Vue just fine too.

To me it's more like, if you were really excited for "zero config" webpack, then parcel is what you're actually looking for, but as soon as you need any customization, you're pushed back into Webpack.

A lot of it has to do with relative tooling cost. On large projects, the investment in getting your webpack compiling the way you want is a very small investment compared to doing the same thing on small projects or test environments.

The fetch request was an express route, but oh well. This github repo uses express and react, a bit of documentation. https://github.com/kwhitley/parcel-express-react/blob/master/package.json. Edit, this helped me get parcel and express running: https://parceljs.org/api.html#middleware. They even have a link to improve docs if it does not help.

Is anyone using parcel (https://parceljs.org/)? They claim in a blog post in a recent release that it now supports Elm out of the box, and I can get a log statement from my Elm code to show up in the console, but I don't get anything rendered to the DOM. I have my Elm code in a Main.elm file that looks like this:

&#x200B;

import Browser

import Html exposing (..)

import <code>Html.Events</code> exposing (onClick)

import Debug exposing (log)

&#x200B;

main =

Debug.log "Hello from Elm!"

&#x200B;

Browser.sandbox { init = init, update = update, view = view }

&#x200B;

type alias Model = Int

&#x200B;

init : Model

init = 0

&#x200B;

type Msg = Increment | Decrement

&#x200B;

update : Msg -> Model -> Model

update msg model =

case msg of

Increment -> model + 1

Decrement -> model - 1

&#x200B;

view : Model -> Html Msg

view model =

div []

[ button [ onClick Decrement ] [ text "-" ]

, div [] [ text (String.fromInt model) ]

, button [ onClick Increment ] [ text "-" ]

]

&#x200B;

I don't know what parcel is doing behind the scenes, but I suspect that using Browser.sandbox is not quite what I want. I'm pretty new to Elm; is there a way to tell it to instead render to a specific DOM node or something? I'm thinking of something like React's ReactDom.render(<Blah />, document.getElementById('main')).

import is supported in Chrome and Safari, but you should still use a bundler to get Firefox and Edge. There are alternative methods, but using a bundler preferred for a number of reasons and is probably the easiest.

https://caniuse.com/#feat=es6-module-dynamic-import

https://parceljs.org

I know most are suggesting using a preprocessor which is a great idea. If you don't want to get into the nitty gritty of creating your own build system then Parcel is a good way to get started with little configuration.

For webpack and Babel at least (and a lot of other projects), this comes downs to their fundamental design I believe, which is a plug-in based architecture. That said, you could probably create a meta package to bundle common dependencies which is common for internal tools, and can also been seen in react-scripts.

Not saying it’s good or bad per se, but one tool specifically going in the other direction (all-in-one / out of the box) is Parcel, which is “zero config” module bundler.

From https://parceljs.org/getting_started.html

parcel watch index.html

Starts watch mode and recompiles the changed parts of the index.html dependency graph.

Edit: an example repo https://github.com/ben-pr-p/elixir-phoenix-parcel-example

Well there's a few things that you'll find you probably want. Compiling typescript, including source maps, bundling modules, compiling dev builds vs building minfied bundles, rebuilding on save, hot-reloading on save, adding some type of CSS preprocessor. Compared to the equivalent webpack config, this is pretty minimal and transparent.

You might also look at parcel which presumably does a lot of the same stuff automagically without a lot of configuration.