How to compress the packaged files?

[JZLeung]

after running the script : parcel build index.html --no-minify

the packaged files are not compressed.

how to compress them ?

[Raincal]

remove --no-minify

[JZLeung]

@Raincal
if remove --no-minify , it will appear like #8

Cannot read property 'start' of undefined

[albinotonnina]

Should #8 be resolved? Not sure but I have no issues with --no-minify since 1.2.0
What version of node/parcel you have now @JZLeung?

[JZLeung]

{17-12-23 19:21}Leung:~/workspace/parcel lynnleung% node -v
v8.9.1
{17-12-23 19:23}Leung:~/workspace/parcel lynnleung% cat package.json | grep parcel
  "name": "parcel-demo",
  "description": "A demo of parcel-bundle",
    "parcel-bundler": "^1.3.0",
    "parcel-plugin-url-loader": "^1.0.3",

[DeMoorJasper]

@JZLeung This is strange the bug of #8 is impossible on 1.3, because it no longer uses the library causing the bug
Could u provide a lil bit more info for starters the entire stacktrace you get when enabling minification?

[JZLeung]

@albinotonnina
@devongovett
Maybe because the yarn has a cache, I can build it after I reinstall it with NPM.
But it cause another error :

{17-12-23 19:49}Leung:~/workspace/parcel lynnleung% npm run build

> parcel-demo@1.0.0 build /Users/lynnleung/workspace/parcel
> NODE_ENV=production && parcel build index.js

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

the .babelrc:

{
    "presets": ["env"],
    "env": {
        "production": {
            "presets": ["es2015"]
        }
    }
}

[JZLeung]

ok, i built another demo:
package.json:

{
  "name": "parcel-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "NODE_ENV=production && parcel build index.html",
    "dev": "parcel index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^7.2.3",
    "babel-preset-env": "^1.6.1",
    "parcel-bundler": "^1.3.0",
    "postcss-modules": "^1.1.0"
  }
}

without any configures.
run script npm run build , it work well.
but, the js file is not compressed:

// modules are defined as an array
// [ module function, map of requires ]
//
// map of requires is short require name -> numeric require
//
// anything defined in a previous bundle is accessed via the
// orig method which is the require for previous bundles

require = (function (modules, cache, entry) {
  // Save the require from previous bundle to this closure if any
  var previousRequire = typeof require === "function" && require;

  function newRequire(name, jumped) {
    if (!cache[name]) {
      if (!modules[name]) {
        // if we cannot find the module within our internal map or
        // cache jump to the current global require ie. the last bundle
        // that was added to the page.
        var currentRequire = typeof require === "function" && require;
        if (!jumped && currentRequire) {
          return currentRequire(name, true);
        }

        // If there are other bundles on this page the require from the
        // previous one is saved to 'previousRequire'. Repeat this as
        // many times as there are bundles until the module is found or
        // we exhaust the require chain.
        if (previousRequire) {
          return previousRequire(name, true);
        }

        var err = new Error('Cannot find module \'' + name + '\'');
        err.code = 'MODULE_NOT_FOUND';
        throw err;
      }
      
      localRequire.resolve = resolve;

      var module = cache[name] = new newRequire.Module;

      modules[name][0].call(module.exports, localRequire, module, module.exports);
    }

    return cache[name].exports;

    function localRequire(x){
      return newRequire(localRequire.resolve(x));
    }

    function resolve(x){
      return modules[name][1][x] || x;
    }
  }

  function Module() {
    this.bundle = newRequire;
    this.exports = {};
  }

  newRequire.Module = Module;
  newRequire.modules = modules;
  newRequire.cache = cache;
  newRequire.parent = previousRequire;

  for (var i = 0; i < entry.length; i++) {
    newRequire(entry[i]);
  }

  // Override the current require with this new one
  return newRequire;
})({4:[function(require,module,exports) {
console.log('hello, parcel.')
},{}]},{},[4])

[mg901]

Yes, I have the same problem. The creators of parcel would be better to create a starter with minimal settings. Where you could see how to set everything up correctly.

[orzechowskid]

The parcel prelude file is not currently minified (see: #334 and #354). But your app's source files are. It's hard to tell though since console.log('hello, parcel.') can't be minified :) Try adding more code to your app, then re-compile and re-examine the output.

[JZLeung]

@orzechowskid
oh god. i found a fatal error when i testing the babel plugin.
this is my source

console.log('hello, parcel.')

[1,2,3,4,5].map(value => {
    console.log(value)
})

(() => {
   const root = document.getElementById('root')
   let newLine = document.createElement('p')
   newLine.innerText = 'This text is from js.'
   root.appendChild(newLine) 
})()

and this is the packaged code:

...
//                                         ↓ It seems to be wrong here.
console.log('hello, parcel.')[(1, 2, 3, 4, 5)].map(function (value) {
  console.log(value);
})(function () {
  var root = document.getElementById('root');
  var newLine = document.createElement('p');
  newLine.innerText = 'This text is from js.';
  root.appendChild(newLine);
})();

...

and my browser throw an error (look at the pic):

 Cannot read property '5' of undefined

[jorgegonzalez]

@JZLeung

console.log('hello, parcel.')[(1, 2, 3, 4, 5)].map(function (value) {
  console.log(value);
}

This code will work if you add a semicolon after console.log. You are beginning the statement following console.log('hello, parcel.') with a [ which is a no no.

edit: You also need to add a semicolon after your map function for this to work properly. I think the rule is to never start a line with (, [, or ` when omitting semicolons.

[devongovett]

Closing, looks like you figured out the problem. We'll handle minifying the prelude in #334.

[JZLeung]

@jorgegonzalez
in fact, i only want to create an IIFE. 😢
@devongovett
thx of all.