Hello 👋

I was looking at contributing to parcel, and noticed a few things that would make it easier for you and others to maintain and contribute to the project. I thought I would just list them in one big issue.

• Enforce a style. I would recommend using prettier with pre-commit hooks

• Get Travis CI setup

• Add a CONTRIBUTING.md document with a basic overview of how someone can get started contributing to parcel

• Add a build script

• Consider typing the code base. This is mostly just personal preference, but I find it easier to contribute/maintain typed code. Flow would be a good option if you were open to it 😃

cc @devongovett, thanks!

• How do I get this SCSS file working?
• How can I watch a file in one place and generate a file in another?
• Is there a version manifest? Does this support versioning of any kind?
• Can I watch multiple asset entrypoints at once (like CSS, JS, HTML)?

As discussed on reddit...

Hi. Is it possible to add Brunch to benchmarks?

Based on twitter convo:

https://twitter.com/dan_abramov/status/938090483166924800

I’d suggest to reconsider this (or at least limit it to compiling with -env preset only). This encourages authors to publish packages with stage 0 proposals, and ultimately makes builds slower for everyone. Also .babelrc won’t be compatible between Babel versions.

Using vue-component-compiler.

I'd love for the app the README benchmarks are based on to be published, so that these can be analyzed and improved.

Personally, any time I see benchmarks I want to see:

• How can I reproduce?
• How many runs are the benchmarks based on?
• Was best run or average run considered?
• What were the configurations? Caching in the parcel config was mentioned, but what about caching capabilities of webpack, babel, etc...?

There is no much competition in bundlers world (yet?), but there IS actually something other than browserify and webpack - fuse-box that claims to be "blazing fast" too.

So any speed comparsion in README would be great, so we can have heathly competition here :)

Heyo. I've seen the flag --public-url but not exactly sure how it behaves. I am trying to --public-url=. and I've also tried --public-url=http://localhost:8080.

It would be nice if I could just modify it. Especially for cases where I'd throw everything that's on dist in a S3 bucket with static hosting enabled. Does that make sense? am I misunderstanding something?

Thanks! Very nice stuff, tho!

❤️

I'd love to see a JS bundler that includes support for both local and distributed cache. This would dramatically speed up initial builds e.g. for developers when switching to a new branch or getting started on a new project or for production builds on CI servers, etc.

Something like what https://bazel.build/ does.

While working on #50 I had those two tests failing randomly... I did not took the time to understand the issue... Maybe it come from my machine.

 // ...

  hmr
    ✓ should emit an HMR update for the file that changed (244ms)
    ✓ should emit an HMR update for all new dependencies along with the changed file (309ms)
Assertion failed: (0), function uv_close, file ../deps/uv/src/unix/core.c, line 182.
error Command failed with signal "SIGABRT".

  // ...

  watcher
    ✓ should rebuild on file change (223ms)
    ✓ should re-generate bundle tree when files change (319ms)
    1) should only re-package bundles that changed
    ✓ should unload assets that are orphaned (295ms)


  60 passing (10s)
  1 failing

  1) watcher should only re-package bundles that changed:

      AssertionError [ERR_ASSERTION]: 1512573179 != 1512573179
      + expected - actual


      at Context.<anonymous> (test/watcher.js:100:12)
      at <anonymous>

Tools such as Make (and the upcoming Go 1.10) get good speed results because they avoid doing work they don't have to do. In particular, Make compares the file mtimes of every dependency to the mtime of the target. If the target is newer, it realizes it doesn't have to do any work, the output is already up to date.

Go 1.10 takes a similar approach but generates a hash based on the contents of the inputs, and uses this to determine whether it needs to rebuild a target.

I haven't read through the source code but it was difficult to determine whether the tool is doing this from the documentation. The documentation hints at whether it does these things but isn't explicit about them.

If you're not currently doing this, odds are you can extract even more speed gains from the tool in question.

error:

Server running at http://localhost:1234
🚨  ..../node_modules/react-dates/constants.js: Unexpected token ] in JSON at position 102
    at JSON.parse (<anonymous>)
    at Object.load (/Users/***/.config/yarn/global/node_modules/parcel-bundler/src/utils/config.js:35:17)
    at <anonymous>

code:

import { START_DATE } from 'react-dates/constants';

Am I missing a babel transform?

here is my .babelrc

{
  "presets": ["env", "react", "stage-0"],
  "plugins": [
    ["module-resolver", {
      "alias": {
        "common": "./src/common"
      }
    }]
  ]
}

It would be great if parcel supported multiple targets, preferably using using a browserslist file.
For instance:

[modern]
last 1 Chrome versions
last 1 Firefox versions

[legacy]
last 2 version
not ie < 11
> 2%

Tools in the pipeline that support it like babel-preset-env and postcss (primarily autoprefixer) should use it as well.

The output should be two completely separate builds. The modern one with only the neccessary transpilation (would a target of chrome 63 still bundle files?), and the legacy one which has babel-polyfill, whatwg-fetch and regenerator-runtime injected, plus all the ES5 transpilation.

Optionally, parcel should output an ES5 compliant snippet of code which could be either output as an entry.js file or placed inline. The snippet would use feature detection to asynchronously load the required bundles. For example:

(function() {
  try {
    new Function('async () => {}')();
  } catch (error) {
    // create script tag pointing to legacy-bundle.js;
    return;
  }
  // create script tag pointing to modern-bundle.js;;
})();

Using <script type="module"> for feature detection is not recommended.

As for selective async loading of CSS, I'm not sure if it's worth it.

Is there any support for global import just like in webpack https://webpack.js.org/plugins/provide-plugin/

and also is it possible not to transform public url ( CDN, etc )

Is there a way to define a proxy? In webpack we are doing something like this:

devServer: {
  proxy: {
   '/api*' :{
      target: 'http://localhost:3001/graphql',
      secure: false,
    },
}

More details about webpack's devserver proxy here.

Hello guys!
First of all: thank you for this awesome job. It looks amazing!

I tried run the parcel index.html command for the first time and the following error was thrown:

/Users/stanley/.config/yarn/global/node_modules/parcel-bundler/src/builtins/css-loader.js: Couldn't find preset "env" relative to directory "/Users/stanley/.config/yarn/global/node_modules/parcel-bundler/src"
    at /Users/stanley/.config/yarn/global/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (/Users/stanley/.config/yarn/global/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (/Users/stanley/.config/yarn/global/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (/Users/stanley/.config/yarn/global/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (/Users/stanley/.config/yarn/global/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/Users/stanley/.config/yarn/global/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/Users/stanley/.config/yarn/global/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at JSAsset.parse (/Users/stanley/.config/yarn/global/node_modules/parcel-bundler/src/assets/JSAsset.js:52:20)
    at <anonymous>

To solve that, I had to install babel-preset-env package (also globally).

NodeJS: v9.0.0 (stable)
OS: Mac OS X Sierra 10.12.6

Hello, cool project. I tried running this on one of my projects and encountered an error Unknown plugin "transform-es2015-modules-commonjs" specified in "base" at 0, attempted to resolve relative to "/Users/matthew/dev/my-project"

I think it is looking up this plugin within my project, but I did not have this plugin (or any babel plugin) installed. This project uses ES import/export syntax. Is Babel usage required at this time?

Following the tutorial on https://parceljs.org/ I get the following error when I run parcel index.html.

❯ parcel index.html
Server running at http://localhost:1234
🚨  /Users/foo/Desktop/parcel-app/index.html: Cannot read property 'posthtml' of undefined
    at /Users/foo/.nvm/versions/node/v7.6.0/lib/node_modules/parcel-bundler/lib/transforms/posthtml.js:5:31
    at Generator.next (<anonymous>)
    at step (/Users/foo/.nvm/versions/node/v7.6.0/lib/node_modules/parcel-bundler/lib/transforms/posthtml.js:26:191)
    at /Users/foo/.nvm/versions/node/v7.6.0/lib/node_modules/parcel-bundler/lib/transforms/posthtml.js:26:437
    at /Users/foo/.nvm/versions/node/v7.6.0/lib/node_modules/parcel-bundler/lib/transforms/posthtml.js:26:99
    at getConfig (/Users/foo/.nvm/versions/node/v7.6.0/lib/node_modules/parcel-bundler/lib/transforms/posthtml.js:22:18)
    at /Users/foo/.nvm/versions/node/v7.6.0/lib/node_modules/parcel-bundler/lib/transforms/posthtml.js:35:24
    at Generator.next (<anonymous>)
    at step (/Users/foo/.nvm/versions/node/v7.6.0/lib/node_modules/parcel-bundler/lib/transforms/posthtml.js:26:191)
    at /Users/foo/.nvm/versions/node/v7.6.0/lib/node_modules/parcel-bundler/lib/transforms/posthtml.js:26:437

🙋 feature request
Include css-loader (auto-refresh css) in the bundle if the css is declared in the html

🔦 Context
So for example if someone would use one big global css file in index.html like this, it would not auto-update

<link rel="stylesheet" href="./global.css" />

JSON files are not resolved.

We should be able to do:

import data from './data.json';

I'm currently getting error similar to this:

Cannot resolve dependency './data.json'

index.js:

import main from './main';
//
main();

main.js:

export default () => {
    console.log(classes.main);
};

result:

index.js -> empty
index.html ->

<html>

<body>
    <script src="./index.js"></script>
</body>

</html>

Following Getting Started https://parceljs.org/getting_started.html

Result:

Server running at http://localhost:1234
⏳  Building index.html...
(node:11328) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): RangeError: Maximum call stack size exceeded

Node.js: 8.6.0

BTW: Highly recommend https://github.com/mcollina/make-promises-safe

Using Google Chrome 62.0.3202.94 on Windows 10 the "Get Started" and "Github" buttons on https://parceljs.org/ are only clickable on the lower half of the button.

https://github.com/babel/minify

Update: UglifyJS caused build to fail in this issue: #8

Steps to reproduce:

nvm use 8
yarn add global parcel-bundler
parcel index.html

index.html

<html>
<body>
  <main></main>
  <script src="./index.js"></script>
</body>
</html>

index.js

import Cx from './main.css';
console.log(Cx);

main.css

.someClass {
  color: red;
}

Output:

λ parcel index.html
Server running at http://localhost:1234
🚨  /Users/alexey/.config/yarn/global/node_modules/parcel-bundler/src/builtins/css-loader.js: Couldn't find preset "env" relative to directory "/Users/alexey/.config/yarn/global/node_modules/parcel-bundler/src"
    at /Users/alexey/.config/yarn/global/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (/Users/alexey/.config/yarn/global/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (/Users/alexey/.config/yarn/global/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (/Users/alexey/.config/yarn/global/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (/Users/alexey/.config/yarn/global/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/Users/alexey/.config/yarn/global/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/Users/alexey/.config/yarn/global/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at JSAsset.parse (/Users/alexey/.config/yarn/global/node_modules/parcel-bundler/src/assets/JSAsset.js:52:20)
    at <anonymous>

Hi. As many others I am very excited for the work you are doing here. Badly needed.
I have stumpled upon a slight problem building even just the simplest html file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <p>Hello...</p>
  </body>
</html>

After running parcel index.html, the "dist" folder is created but it is empty.
The following is the console errors:

Server running at http://localhost:1234
⏳  Building index.html...
(node:11164) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 3001): RangeError: Maximum call stack size exceeded
(node:11164) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Thanks for this project man, super excited to try it all out!

Ran into an issue with trying to use an external stylesheet. Not sure if there's a way to override this behaviour somehow.

In my index.html file, I have remote references to some CDN fonts, one example would be:

• https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

When running my dev server, it attempts to rewrite this URL and appends the dev server URL to it:

• http://localhost:1234/dist/https:/maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

Would be great if the loader would ignore remote URLs.

I tried parcel index.jsx it gave:

Server running at http://localhost:1234
🚨  webapp/source/index.jsx: Unexpected token ] in J    at JSON.parse (<anonymous>)
    at Object.load (/home/me/.config/yarn/global/node_modules/parcel-bundler/src/utils/config.js:35:17)
    at <anonymous>
^C

granted, it's not a valid html file.

the file I currently use with webpack is linked via script tag to webpack's output js.

I tried using a script tag to my jsx entrypoint, but that didn't work either.

This was just with the default install, and 0 config.

Travis, Appveyor

Firstly, super excited for this. I was surprised at how quickly I was able to get a dev environment setup. You are doing some awesome work.

I have parcel-bundler, react and react-dom installed.

I have a simple index.html file and an index.js file which is just outputting "Hello World" to a new div on the index.html file.

<body>
    <div id="root"></div>
     <script src="./index.js"></div>
</body>

I have no problems running parcel index.html or parcel watch index.html

however when I run parcel build index.html I get the following error:

./node_modules/.bin/parcel build index.html
🚨  /Users/azhar/projects/react/index.js: Cannot read property 'start' of undefined
    at module.exports (/Users/azhar/projects/react/node_modules/babel-to-estree/babylon-to-espree/attachComments.js:56:42)
    at module.exports (/Users/azhar/projects/react/node_modules/babel-to-estree/babylon-to-espree/index.js:35:3)
    at exports.toEstree (/Users/azhar/projects/react/node_modules/babel-to-estree/index.js:9:3)
    at module.exports (/Users/azhar/projects/react/node_modules/parcel-bundler/src/transforms/uglify.js:10:39)
    at <anonymous>

Edit: Temporary workaround

Hi,

Looks very cool!

I have a SCSS file in a project that imports CSS from node_modules using @import declaration:

@import '~some-package/path/to/style';
@import '../../styles/colors';

// etc...

When I run parcel I get the following error:

🚨  /Users/shiloa/projects/myapp/src/components/MainApp.scss: File to import not found or unreadable: ~some-package/path/to/style.
Parent style sheet: stdin

I should note that I did not configure anything specifically for parcel before running parcel src/index.jsx (I have an existing webpack and babel configuration). Do I need some special configuration to support SCSS files or @import from node_modules ?

loot$ parcel build src/index.js 🚨 /Users/loot/dev/project/src/index.js: Cannot read property 'start' of undefined at module.exports (/Users/loot/.nvm/versions/node/v8.7.0/lib/node_modules/parcel-bundler/node_modules/babel-to-estree/babylon-to-espree/attachComments.js:56:42) at module.exports (/Users/loot/.nvm/versions/node/v8.7.0/lib/node_modules/parcel-bundler/node_modules/babel-to-estree/babylon-to-espree/index.js:35:3) at exports.toEstree (/Users/loot/.nvm/versions/node/v8.7.0/lib/node_modules/parcel-bundler/node_modules/babel-to-estree/index.js:9:3) at module.exports (/Users/loot/.nvm/versions/node/v8.7.0/lib/node_modules/parcel-bundler/src/transforms/uglify.js:10:39) at <anonymous>
using babel preset env

This might feel pedantic — especially with how awful most people are with this specific phrase — but it should be “Blazingly fast”.

It would be amazing to support WASM, so that C/C++/Rust and eventually many other languages could be automatically supported. Webpack is already working on this, and I've been working on it too here: https://github.com/lastmjs/zwitterion

I already have initial support for including basic C and C++ files, and WASM is now or will be ES module integratable.

It's possible and it would be awesome for this project to provide support.

First of all, thanks for such a wonderful tool!

Updates to JS files propagate correctly, but changes to imported CSS files will not be applied without refreshing on Firefox.

Tested on Firefox V35.0 and Firefox Developer Edition 58.0b7 (64-bit).

Chrome V62.0.3202.94 (Official Build) (64-bit) updates automatically.

In the docs, I saw the loader I can use for PostCSS. But I didn't see anything for SCSS or Sass. Can I use it with parcel, and if so what package do I need?

Suggestion:

I noticed that the documentation of https://parceljs.org is not hosted in a public repository.
By making it public, the mistakes in the documentation will automatically fix with the help from the community via pull requests.

An example use case is,
in the https://parceljs.org/transforms.html#postcss it says as,

"autoprefixer": { "grid" true }

where a colon is missing in the JSON. This will add complications for a newbie who copy and paste the code directly from the website. I looked up for a way to add a pull request and couldn't find a way to fix that. :(

E.g. what if a bundler could run on Lambda? This combined with a distributed cache would mean that even very large production builds would consistently finish very quickly.

This looks great! I have some question though, since we don't need to setup any configuration.

1. Can we generate all the static pages with the routes from React router?
2. How do you set this up for server side rendering?

I created a test app with the following structure:

index.html
/src
   index.js
   styles.css
/images
   logo.jpg

index.js looks like this:

import styles from "./styles.css";

import("../images/logo.jpg").then(logo => {
  document.body.appendChild(logo());
});

When I build bundles are generated, but when loading the logo.jpg in runtime I get:

Uncaught (in promise) TypeError: bundleLoaders[type] is not a function
    at loadBundle (327d9e5e96a78a58f299f0db51430144.js:137)
    at Array.map (<anonymous>)
    at 327d9e5e96a78a58f299f0db51430144.js:113
    at new Promise (<anonymous>)
    at LazyPromise.then (327d9e5e96a78a58f299f0db51430144.js:195)
    at Object.require.2._bundle_loader (327d9e5e96a78a58f299f0db51430144.js:249)
    at newRequire (327d9e5e96a78a58f299f0db51430144.js:46)
    at require.7 (327d9e5e96a78a58f299f0db51430144.js:63)
    at 327d9e5e96a78a58f299f0db51430144.js:68

When I debug I got this (bundleLoaders have no prop jpg):

Hi there!

Awesome work on this tool. So happy to see that build tools are still being iterated and improved upon 👍

I have a question related to code splitting. If I have two different lazy imports and both of them require for example moment. Will moment be included in both of those bundles? How does it resolve these kinds of dependency graphs?

I can contribute with docs on this, just have to know how it works :)

<!--index.html-->
<!doctype html>
<link rel="stylesheet" href="./lol.css">

works!:

/* lol.css */
body {
  background: url(data:image/gif;base64,something);
}

error:

/* lol.css */
body {
  background: url("data:image/gif;base64,something");
}

(🚨 /Users/chee/projects/nothing/lol.css:2:3: Cannot resolve dependency './data:image/gif;base64,something')

Hello,

If you use mailto: or tel: in your href anchors attributes, the build fails to resolve dependencies.

$ parcel build src/index.html 🚨 /Users/a/Documents/a/a/src/index.html: Cannot resolve dependency './tel:+336…'

Without TypeScript support would be cool (though the Angular team is working really hard to push TypeScript).

Is that just me ? the simplest example does not even work; breaking on the very first variable in ./build/index.js :

"use strict";
require = function (_require) { etc…

Or transforms/babelization/etc… (not shown in the example) are to be added first ?

I installed parcel-bundler globally. When I run parcel index.html I get the following error.

Server running at http://localhost:1234
🚨  Cannot read property 'port' of null
    at new HMRServer (/Users/scienceonlineed/.config/yarn/global/node_modules/parcel-bundler/lib/HMRServer.js:8:43)
    at Bundler.start (/Users/scienceonlineed/.config/yarn/global/node_modules/parcel-bundler/lib/Bundler.js:177:18)
    at /Users/scienceonlineed/.config/yarn/global/node_modules/parcel-bundler/lib/Bundler.js:130:15
    at next (native)
    at step (/Users/scienceonlineed/.config/yarn/global/node_modules/parcel-bundler/lib/Bundler.js:3:191)
    at /Users/scienceonlineed/.config/yarn/global/node_modules/parcel-bundler/lib/Bundler.js:3:437
    at /Users/scienceonlineed/.config/yarn/global/node_modules/parcel-bundler/lib/Bundler.js:3:99
    at Bundler.bundle (/Users/scienceonlineed/.config/yarn/global/node_modules/parcel-bundler/lib/Bundler.js:160:7)
    at Bundler.serve (/Users/scienceonlineed/.config/yarn/global/node_modules/parcel-bundler/lib/Bundler.js:615:10)
    at Command.bundle (/Users/scienceonlineed/.config/yarn/global/node_modules/parcel-bundler/bin/cli.js:67:13)

Tested in the following environments with the same result:

Mac

Node version: v6.11.5
Mac version: 10.12.5

Dockerfile:

FROM node:6.11.4
RUN npm install -g parcel-bundler
USER node
WORKDIR /home/node/html
CMD [ "parcel", "index.html" ]
EXPOSE 1234

Is there a way to define alias ? Like webpack config:

According to this https://jsperf.com/for-of-vs-for-loop for of loops are slower than the canonical loop in Javascript. Maybe it's worth a try to further increase performance of the tool. Once the compile bug on Windows is fixed I can give it a try