GithubHelp home page GithubHelp logo

webpack-contrib / babel-minify-webpack-plugin Goto Github PK

View Code? Open in Web Editor NEW
493.0 23.0 44.0 379 KB

[DEPRECATED] Babel Minify Webpack Plugin

License: MIT License

JavaScript 100.00%
babel-minify webpack-plugin babel webpack

babel-minify-webpack-plugin's Introduction

DEPREACTED due to lack of support/bug fixes/ new features, project abandoned, please migrate on https://github.com/webpack-contrib/terser-webpack-plugin


npm deps test coverage quality chat

Babel Minify Webpack Plugin

A Webpack Plugin for babel-minify - A babel based minifier

Install

npm install babel-minify-webpack-plugin --save-dev

Usage

// webpack.config.js
const MinifyPlugin = require("babel-minify-webpack-plugin");
module.exports = {
  entry: //...,
  output: //...,
  plugins: [
    new MinifyPlugin(minifyOpts, pluginOpts)
  ]
}

Options

minifyOpts

minifyOpts are passed on to babel-preset-minify. You can find a list of all available options in the package directory.

Default: {}

pluginOpts

  • test: Test to match files against. Default: /\.js($|\?)/i
  • include: Files to include. Default: undefined
  • exclude: Files to exclude. Default: undefined
  • comments: Preserve Comments. Default: /^\**!|@preserve|@license|@cc_on/, falsy value to remove all comments. Accepts function, object with property test (regex), and values.
  • sourceMap: Configure a sourcemap style. Default: webpackConfig.devtool
  • parserOpts: Configure babel with special parser options.
  • babel: Pass in a custom babel-core instead. Default: require("babel-core")
  • minifyPreset: Pass in a custom babel-minify preset instead. Default: require("babel-preset-minify")

Why

You can also use babel-loader for webpack and include minify as a preset and should be much faster than using this - as babel-minify will operate on smaller file sizes. But then, why does this plugin exist at all? -

  • A webpack loader operates on single files and the minify preset as a webpack loader is going to consider each file to be executed directly in the browser global scope (by default) and will not optimize some things in the toplevel scope. To enable optimizations to take place in the top level scope of the file, use mangle: { topLevel: true } in minifyOptions.
  • When you exclude node_modules from being run through the babel-loader, babel-minify optimizations are not applied to the excluded files as it doesn't pass through the minifier.
  • When you use the babel-loader with webpack, the code generated by webpack for the module system doesn't go through the loader and is not optimized by babel-minify.
  • A webpack plugin can operate on the entire chunk/bundle output and can optimize the whole bundle and you can see some differences in minified output. But this will be a lot slower as the file size is usually really huge. So there is another idea where we can apply some optimizations as a part of the loader and some optimizations in a plugin.

Maintainers


Boopathi Rajaa

Juho Vepsäläinen

Joshua Wiens

Kees Kluskens

Sean Larkin

babel-minify-webpack-plugin's People

Contributors

boopathi avatar danez avatar davestaab avatar dylanonelson avatar evilebottnawi avatar greenkeeper[bot] avatar greenkeeperio-bot avatar joshwiens avatar knpwrs avatar michael-ciniawsky avatar niksudan avatar orenfromberg avatar ryanclark avatar simon04 avatar skipjack avatar trysound avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

babel-minify-webpack-plugin's Issues

Plugin 0 specified in "base" provided an invalid property of "babiliOpts"

I'm receiving the following error when running babili-webpack-plugin with the following entry in my webpack config.

plugins: [
  new BabiliWebpackPlugin({}, { comments: false })
]

I'm using version 3.3.0 of webpack.

errors: 
      [ ModuleBuildError: Module build failed: Error: Plugin 0 specified in "base" provided an invalid property of "babiliOpts"
            at Plugin.init (/usr/src/app/node_modules/babel-core/lib/transformation/plugin.js:131:13)
            at Function.normalisePlugin (/usr/src/app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:152:12)
            at /usr/src/app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:184:30
            at Array.map (native)
            at Function.normalisePlugins (/usr/src/app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
            at OptionManager.mergeOptions (/usr/src/app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
            at OptionManager.init (/usr/src/app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
            at File.initOptions (/usr/src/app/node_modules/babel-core/lib/transformation/file/index.js:212:65)
            at new File (/usr/src/app/node_modules/babel-core/lib/transformation/file/index.js:135:24)
            at Pipeline.transform (/usr/src/app/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
            at transpile (/usr/src/app/node_modules/babel-loader/lib/index.js:49:20)
            at Object.module.exports (/usr/src/app/node_modules/babel-loader/lib/index.js:174:20)
            at runLoaders (/usr/src/app/node_modules/webpack/lib/NormalModule.js:194:19)
            at /usr/src/app/node_modules/loader-runner/lib/LoaderRunner.js:364:11
            at /usr/src/app/node_modules/loader-runner/lib/LoaderRunner.js:230:18
            at runSyncOrAsync (/usr/src/app/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
            at iterateNormalLoaders (/usr/src/app/node_modules/loader-runner/lib/LoaderRunner.js:229:2)
            at Array.<anonymous> (/usr/src/app/node_modules/loader-runner/lib/LoaderRunner.js:202:4)
            at Storage.finished (/usr/src/app/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:15)
            at /usr/src/app/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:69:9
            at /usr/src/app/node_modules/graceful-fs/graceful-fs.js:78:16
            at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:503:3) ],

Uncaught TypeError: Class constructor cannot be invoked without 'new' [bug]

I'm not sure whether this is a babel-minify-webpack-plugin or a babel-minify plugin.
I supposed the latter so I reported this bug there (babel/minify#711) but for sake of completeness I'm reporting it here as well in case anybody else is facing the same.

What happens?
It looks like classes are converted to functions instead of ES6 classes. It's not up to modules: it's triggered by tons of them, I manually tried to remove dependencies but this pop up anyway for most of them.

Uncaught TypeError: Class constructor _class2 cannot be invoked without 'new'
    at exports.default (jszip.js:13)
    at jszip.js:13

REPRO
https://github.com/damianobarbati/babel-minify-bug
Instructions in README.

npm install -g yarn pm2
yarn install
yarn serve:dev //run pm2 to serve the website
yarn build:dev //run webpack without minifying and everything is fine at http://localhost:8080
yarn build:prod //run this to run webpack with minifying and http://localhost:8080 is broken

Babel versions and plugins
I'm using babel-preset-env and babel-minify-webpack-plugin and I tried both the following minify options:

new BabelMinifyPlugin(), //everything on
new BabelMinifyPlugin({ mangle: false, evaluate: false, propertyLiterals: false }), //no mangle at all

Config and versions:

"babel": {
    "presets": [
        [
            "env",
            {
                "modules": false,
                "useBuiltIns": "usage",
                "debug": false
            }
        ],
        "stage-0",
        "react"
    ],
    "plugins": [
        "lodash",
        "transform-decorators-legacy",
        "transform-class-properties"
    ]
},
....
"babel-minify-webpack-plugin": "0.2.0",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-plugin-transform-decorators-legacy": "1.3.4",
"babel-polyfill": "7.0.0-beta.2",
"babel-preset-env": "2.0.0-beta.2",
"webpack": "3.7.1",

Doesn't work with draftjs (react)

Hi, wanted to move from uglify to babel-minify, but it breaks draftjs in production, even with the simplest boilerplate code.

Setup

[email protected] - latest at time of speaking
[email protected] - latest at time of speaking
[email protected] (also tested react@16, same problem)

Webpack:

plugins: [
    new BabiliPlugin({}, {comments: false}),
]

React code lifted straight from draft-js docs:

import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = (editorState) => this.setState({editorState});
  }
  render() {
    return (
      <Editor editorState={this.state.editorState} onChange={this.onChange} />
    );
  }
}

ReactDOM.render(
  <MyEditor />,
  document.getElementById('container')
);

Output

The code crashes with error below:
screen shot 2017-08-17 at 14 57 41


I know this issue report is a bit sparse. I can't get the source maps to work with babel-minify, so I can't really tell what's going on. The problem does not appear when using uglify instead of babel-minify..

UnhandledPromiseRejectionWarning when building

  1. I use the latest Version (v0.2.0).
  2. The minimal project is the current(v 1.2.4) vue webpack template with this build config

The only changes to the template config file are :
const MinifyPlugin = require('babel-minify-webpack-plugin')
and replacing UglifyJs with
new MinifyPlugin(),

When building I get this Error :

$ node build/build.js
(node:23633) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: original.line and original.column are not numbers -- you probably meant to omit the original mapping entirely and only map the generated position. If so, pass null for the original mapping instead of an object with empty or null values.
Done in 18.79s.
  1. Node version is v6.12.0 on Debian Stretch

source maps issue

I used devtool: 'source-map' in webpack config and did not use babili-webpack-plugin.
Here are some code of my source file:

var b = 1024;

console.log(10)

All worked great, I could set breakpoint to line:
var b = 1024;
and to line
console.log(10)
Also I could see the value of "b" variable during debugging.

But after I added babili-webpack-plugin I can not see the value of "b" variable. Also now I can set breakpoint only to line:
console.log(10)
and can not set breakpoint to line:
var b = 1024;

Is it an issue or maybe I do something wrong? Here is part of my webpack.config.js

const config = {
    devtool: 'source-map',
    plugins: [
        new BabiliPlugin({}, {
            comments: false
        })
    ]
}

Babel 7 Support

This plugin still depends on babel-core 6.23. Any possibility of updating to @babel/core instead?

Problem in strict-mode with ejs-templates

In my project I use ejs-template which are compiled with _.template which makes use of the with-statement. This is not allowed in strict-mode so obviously babel-minify fails. Is there a way to tell babel to ignore this?

Request for new release

babel-preset-babili released a new version a few days ago that fixes some breaking bugs. Can we get a new release on babili-webpack-plugin pointing its npm depedencies at 0.1.3?

Thanks!

question: diagnosing production build problems with babili

I'm not quite sure here where to start, so any guidance would be helpful. When I build and add the babili-webpack-plugin, I receive the following when I use it in the browser:

Uncaught ReferenceError: X is not defined
    at Object.<anonymous> (6bc3975….vendor.js:38)
    at Y (6bc3975….vendor.js:38)
    at Object.W.exports (6bc3975….vendor.js:38)
    at Y (6bc3975….vendor.js:38)
    at Object.W.exports.ae (6bc3975….vendor.js:38)
    at Y (6bc3975….vendor.js:38)
    at Object.X.J.oe (6bc3975….vendor.js:38)
    at Y (6bc3975….vendor.js:38)
    at Object.W.exports (6bc3975….vendor.js:38)
    at Y (6bc3975….vendor.js:38)

Details

  • works in development mode (devtool enabled)
  • doesn't work when in production
  • I dump the webpack configs as a string but minimize the plugin output (for debugging purposes), here is a gist of the two files, the only notable diff to production is:
    1. devtool: false
    2. removal HMR plugins
    3. addition of babili

What can I do to make progress on this - I feel pretty stuck.

Configuration with react

Can anyone please give me an example of using this plugin with React?
Have no idea about how to configure it, thanks!

ERROR in unknown: await is a reserved word

Perhaps caused by: babel/babel#5873

Hash: 67ec5ca71b5921e8b5c3
Version: webpack 3.0.0
Time: 20083ms
                       Asset     Size  Chunks                    Chunk Names
  4d95ed2eb41721d47f8e.12.js  8.21 kB      12  [emitted]         
   044c18fa72853e79af85.0.js  5.29 kB       0  [emitted]         
   96e100da2eef89cdf7d8.2.js  52.4 kB       2  [emitted]         
   6f8cb7e52a82688bc531.3.js  35.3 kB       3  [emitted]         
   d24ab85b6a0d56c01757.4.js  22.4 kB       4  [emitted]         
   b951be74c847385d6802.5.js  19.1 kB       5  [emitted]         
   1b2b3a69e14514f17eea.6.js  24.8 kB       6  [emitted]         
   8f7ebb8f2f40028333c4.7.js  15.7 kB       7  [emitted]         
   672d513ed7180c740f1c.8.js  14.8 kB       8  [emitted]         
   9324005a6b2e2c3e6467.9.js  17.7 kB       9  [emitted]         
  ec788fbef176e408f938.10.js  9.56 kB      10  [emitted]         
  c00ac6d5c05a6d6b309a.11.js  9.03 kB      11  [emitted]         
   235ff9bd545c31128566.1.js  15.9 kB       1  [emitted]         
  72aaaee1dbaf62e14667.13.js  8.74 kB      13  [emitted]         
  297b480004e065d12e3e.14.js  7.43 kB      14  [emitted]         
  24b84e39b927b8fbc0e1.15.js  7.64 kB      15  [emitted]         
  0c7e2a155b2cba15cfd0.16.js  7.88 kB      16  [emitted]         
  a478fe91266c806daf4d.17.js   7.9 kB      17  [emitted]         
  37bbf2bc31018adfe8f8.18.js  7.38 kB      18  [emitted]         
  5b879331960a762f894f.19.js  7.45 kB      19  [emitted]         
  2a55a6bcc27fff574c48.20.js  7.51 kB      20  [emitted]         
  9733737a578b4a091c58.21.js  7.26 kB      21  [emitted]         
8d7716d445363a0c1744.main.js  3.98 MB      22  [emitted]  [big]  main
               manifest.json  0 bytes          [emitted]         
  [29] (webpack)/buildin/global.js 509 bytes {22} [built]
  [51] (webpack)/buildin/module.js 517 bytes {22} [built]
 [564] multi ./src/index.js 28 bytes {22} [built]
 [565] ./src/index.js 852 bytes {22} [built]
 [669] ./src/App.js 1.55 kB {22} [built]
 [748] ./src/appRoutes.js 3.54 kB {22} [built]
 [821] (webpack)/buildin/amd-options.js 82 bytes {22} [built]
[1294] ./src/__generated__/appRoutes_DummyApp_Query.graphql.js 4.85 kB {22} [built]
[1295] ./src/AppDrawerContent.js 3.4 kB {22} [built]
[1357] (webpack)/buildin/amd-define.js 88 bytes {22} [built]
[1423] ./src/loggers.js 208 bytes {22} [built]
    + 1556 hidden modules

ERROR in unknown: await is a reserved word (39856:20)
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
yarn list webpack babili-webpack-plugin babel-core babel-runtime
yarn list v0.24.6
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]

Consider moving this into webpack/webpack?

Hey!!! My name is Sean, and I'm one of the core maintainers for webpack. By the way, nice job on creating something so quickly after the release of babili.

Since webpack already owns UglifyJSPlugin, I'd love to see this also moved into our organization, whether it be added as core code, or a repo underneath the org.

The webpack team wants to have optimization stuff as much "Out of the box" as possible for user configuration.

  1. Would you be willing to propose a RFC/Proposal/PullRequest for this on our repo? This plugin would probably be something that lives under webpack/lib/optimize.
  2. If the movement on number 1 is slow, could the webpack org consume the repo, for separate development.

Would you be open to either of these ideas? This will give us a lot more hands on in helping maintain and configuring the plugin for speed and performance, etc.

Let me know what you think. And again thanks for your work.

breaks bundling

Hello,

// webpack.config.js
const path = require("path");
const MinifyPlugin = require("babel-minify-webpack-plugin");

module.exports = {
  devtool: "source-map",
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, "artifact"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        enforce: "pre",
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "eslint-loader"
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      }
    ]
  },
  plugins: [new MinifyPlugin()]
};

leads to

$ webpack
/home/le93us/Desktop/php-study/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:276
        throw new Error(
        ^

Error: original.line and original.column are not numbers -- you probably meant to omit the original mapping entirely and only map the generated position. If so, pass null for the original mapping instead of an object with empty or null values.
    at SourceMapGenerator_validateMapping [as _validateMapping] (/home/le93us/Desktop/php-study/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:276:15)
    at SourceMapGenerator_addMapping [as addMapping] (/home/le93us/Desktop/php-study/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:110:12)
    at /home/le93us/Desktop/php-study/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:72:17
    at Array.forEach (<anonymous>)
    at BasicSourceMapConsumer.SourceMapConsumer_eachMapping [as eachMapping] (/home/le93us/Desktop/php-study/node_modules/webpack-sources/node_modules/source-map/lib/source-map-consumer.js:157:14)
    at Function.SourceMapGenerator_fromSourceMap [as fromSourceMap] (/home/le93us/Desktop/php-study/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:48:24)
    at SourceMapSource.node (/home/le93us/Desktop/php-study/node_modules/webpack-sources/lib/SourceMapSource.js:32:35)
    at SourceMapSource.proto.sourceAndMap (/home/le93us/Desktop/php-study/node_modules/webpack-sources/lib/SourceAndMapMixin.js:30:18)
    at getTaskForFile (/usr/lib/node_modules/webpack/lib/SourceMapDevToolPlugin.js:33:30)
    at chunk.files.forEach.file (/usr/lib/node_modules/webpack/lib/SourceMapDevToolPlugin.js:91:21)
    at Array.forEach (<anonymous>)
    at /usr/lib/node_modules/webpack/lib/SourceMapDevToolPlugin.js:89:18
    at Array.forEach (<anonymous>)
    at Compilation.<anonymous> (/usr/lib/node_modules/webpack/lib/SourceMapDevToolPlugin.js:88:12)
    at Compilation.applyPlugins1 (/usr/lib/node_modules/webpack/node_modules/tapable/lib/Tapable.js:75:14)
    at self.applyPluginsAsync.err (/usr/lib/node_modules/webpack/lib/Compilation.js:670:11)
    at next (/usr/lib/node_modules/webpack/node_modules/tapable/lib/Tapable.js:202:11)
    at Compilation.<anonymous> (/home/le93us/Desktop/php-study/node_modules/babel-minify-webpack-plugin/dist/index.js:119:11)
    at Compilation.applyPluginsAsyncSeries (/usr/lib/node_modules/webpack/node_modules/tapable/lib/Tapable.js:206:13)
    at self.applyPluginsAsync.err (/usr/lib/node_modules/webpack/lib/Compilation.js:666:10)
    at Compilation.applyPluginsAsyncSeries (/usr/lib/node_modules/webpack/node_modules/tapable/lib/Tapable.js:195:46)
    at sealPart2 (/usr/lib/node_modules/webpack/lib/Compilation.js:662:9)
    at Compilation.applyPluginsAsyncSeries (/usr/lib/node_modules/webpack/node_modules/tapable/lib/Tapable.js:195:46)
    at Compilation.seal (/usr/lib/node_modules/webpack/lib/Compilation.js:605:8)
    at applyPluginsParallel.err (/usr/lib/node_modules/webpack/lib/Compiler.js:504:17)
    at /usr/lib/node_modules/webpack/node_modules/tapable/lib/Tapable.js:289:11
    at _addModuleChain (/usr/lib/node_modules/webpack/lib/Compilation.js:507:11)
    at processModuleDependencies.err (/usr/lib/node_modules/webpack/lib/Compilation.js:477:14)
    at process._tickCallback (internal/process/next_tick.js:150:11)

If disable plugin, all works ok.

Can someone help?

Tree shaking not working?

I'm seeing the full lodash library instead of just the map function in my vendor chunk in the compiled /build/visitor/vendor.min.js.
Shouldn't just the map function be there with the following?

import { map } from 'lodash';
console.log(map([1,2], value => value**2));

Repro here => https://github.com/damianobarbati/repro-babili-tree-shaking
To reproduce:
git clone https://github.com/damianobarbati/repro-babili-tree-shaking
yarn install
yarn serve:dev #ctrl+c to close logging
yarn build:prod #run webpack and babili

Optimizing webpack build with babel & babili

The current build sequence for a typical webpack project is transpile -> bundle -> minify. As babili doesn't traverse through Objects and its properties (yet), there will not be much optimizations on the bundler generated code (modules[moduleId].call()) other than mangling and whitespace/comments removal. The pipeline can be transformed to (transpile + minify) -> bundle - if the bundler already produces mangled and has an option to output minified (just the syntax and comments) code. But, we could already do this now -

  1. transpile + minify (mangle=false)
  2. bundle - remove dead code module level (tree-shaking?)
  3. mangle + deadcode(if required) + minify(syntax, comments)
// stage 1
{
  loader: 'babel-loader'
  presets: [
    'es2016',
    'react',
    [
      'babili', { // <- options not yet supported (https://github.com/babel/babili/pull/162)
        mangle: false // this will be performed on the entire bundle.
        deadcode: false // not tested which is better for deadcode - stage1 or 3 - just an idea
      }
    ]
  ]
}

// stage 2
bundle - webpack

// stage 3
new BabiliWebpackPlugin({
  mangle: true, // <- option not yet supported
  deadcode: true, // <- option not yet supported
  [everythingelse]: false // <- just a notation
  comments: false,
});
// or 
babel.transform(bundledcode, {
  minified: true, // syntax
  compact: true,
  comments: false,
  plugins: ["mangle", "deadcode"]
})

From babel/website#898 (comment) - edited and added more description

Banner comment is removed

Some idea of how to do not delete the comments I created with the plugin banner.
By the way I do not have the option comment a false, and the format of my comment is as follows:

const banner = [
    '/**!',
    '* @project       Empresa',
    '* @name          Empresa',
    '* @author        Autor',
    '* @copyright     Copyright (c)  ' + (new Date().toString()),
    '*/'
].join('\n');

Uncaught ReferenceError: __webpack_require__ is not defined

My webpack config looks like so:

var config = {
  devtool: '#eval-source-map',
  entry:  ['whatwg-fetch', './src/index.js'],

  output: {
    path: dest,
    filename: 'bundle.js'
  },

  module: {
    loaders: [{
      test: /\.js?$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel',
      query: {
        presets: ['stage-2','es2015'],
        plugins: ['transform-class-properties', 'transform-object-rest-spread', 'transform-function-bind']
      }
    }],

  },

  plugins: [
  
    new BabiliPlugin({
      comments: false
    })
  ],

  node: {
    console: true,
    fs: 'empty'
  },

  devServer: {
    contentBase: './',
    colors: true,
    historyApiFallback: true,
    inline: true,
    outputPath: __dirname
  }
}

Invalid option "test" bug

Hi,

When using the plugin like that:

new BabiliPlugin({
      options: {
        test: /\.jsx?$/i,
        comments: false,
        sourceMap: true
      }
    })

and then running webpack compilation, this error shows up in the terminal:
ERROR: Invalid option "test"

This error is actually thrown by the babel-preset-babili module.

I had to revert to the 0.0.11 version in order to make it work again.

I'm using webpack version 2.6.0.

Thanks

JavaScript Foundation License

The license in this repo needs to be updated at the request of the foundation.

The LICENSE needs to be named LICENSE ( no extension ) if it isn't already.

The LICENSE needs to have the following copy.

Copyright JS Foundation and other contributors

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

As a request from the JavaScript Foundation to simplify the legal issues, the update needs to be committed by @boopathi

A joined array of ES6 template literals is minfied uncorrectly

Hi! Thank you for the awesome package. I've been using it for a long time and it's been great. Today I stumbled upon this issue.

Node version

node -v
v8.5.0

OS: Windows 10

This:

const message = [`Hey`, `Jude`].join('\n');
console.log(message);

Is minified to this:

function(){console.log('\n')}

Whole bundle

var Palindrom=function(a){function b(d){if(c[d])return c[d].exports;var e=c[d]={i:d,l:!1,exports:{}};return a[d].call(e.exports,e,e.exports,b),e.l=!0,e.exports}var c={};return b.m=a,b.c=c,b.d=function(a,c,d){b.o(a,c)||Object.defineProperty(a,c,{configurable:!1,enumerable:!0,get:d})},b.n=function(a){var c=a&&a.__esModule?function(){return a['default']}:function(){return a};return b.d(c,'a',c),c},b.o=function(a,b){return Object.prototype.hasOwnProperty.call(a,b)},b.p='',b(b.s=0)}([function(){console.log('\n')}]);

Reproduction repo

https://github.com/alshakero/webpack_bug

Reproduction steps

  1. Clone the repo above.
  2. Run npm install.
  3. Run npm run build

You should see the results in dist with obvious names.

Potentially usefull information:

  1. I couldn't reproduce this in Babel online REPL.
  2. Using normal ES5 string literals works.

Highcharts

I am having an issue with this plugin and Highcharts.

Unfortunately I can't post an error because there is only a warning about a width and height not being set on the parent container (highstock).

Before, with Uglify, I could get the charts working by not mangling the following.

new webpack.optimize.UglifyJsPlugin({
   mangle: {
      except: ['highcharts', 'react-highcharts']
   }
})

I tried something similar with Babli:

new BabiliPlugin({
        mangle: {
          blacklist: ['highcharts', 'react-highcharts']
        }
      })

But my charts are not working...I can see and x and y axis but no chart ... instead of a chart line I see a straight line.

Sorry I realize this probably isn't helpful but other than that warning there is no JavaScript error??

Js heap out of memory

Linux-Mint-18 4.15.0-46-generic # 49~16.04.1-Ubuntu
node v11.1.0
[email protected]
[email protected]

Uncompressed bundle size: 11.6 MiB

Prod config ony adding NODE_ENV=production, mode=production, devtool=none and babel-minfy-webpack-plugin.

Build fails with nodeJS heap out of memory.

<--- Last few GCs --->

[2430:0x36e20b0]    31857 ms: Mark-sweep 1386.4 (1424.2) -> 1386.1 (1423.2) MB, 624.2 / 0.0 ms  (average mu = 0.102, current mu = 0.028) allocation failure scavenge might not succeed
[2430:0x36e20b0]    31862 ms: Scavenge 1386.7 (1423.2) -> 1386.4 (1423.7) MB, 3.2 / 0.0 ms  (average mu = 0.102, current mu = 0.028) allocation failure 
[2430:0x36e20b0]    31866 ms: Scavenge 1387.1 (1423.7) -> 1386.7 (1424.7) MB, 2.7 / 0.0 ms  (average mu = 0.102, current mu = 0.028) allocation failure 


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 0xbe4ab44fb5d]
Security context: 0x32d12dc1d949 <JSObject>
    1: invariant(aka invariant) [0x2a7d8fff0059] [/home/user/myProj/website/node_modules/invariant/invariant.js:~23] [pc=0xbe4abdfb701](this=0x2bb13e8025b1 <undefined>,0x2b0768234d29 <Node map = 0x1505b3ff9581>,0x29361ebfa511 <String[44]: To get a node path the parent needs to exist>,0x2bb13e8025b1 <undefined>,0x2bb13e8025b1 <undefined>,0x2...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0x90db20 node::Abort() [node]
 2: 0x90db6c  [node]
 3: 0xb0702e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node]
 4: 0xb07264 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]
 5: 0xf03592  [node]
 6: 0xf03698 v8::internal::Heap::CheckIneffectiveMarkCompact(unsigned long, double) [node]
 7: 0xf0fdb8 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [node]
 8: 0xf108cb v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node]
 9: 0xf13601 v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [node]
10: 0xedd834 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationSpace) [node]
11: 0x119300e v8::internal::Runtime_AllocateInNewSpace(int, v8::internal::Object**, v8::internal::Isolate*) [node]
12: 0xbe4ab44fb5d 
Aborted

Error: original.line and original.column are not numbers

Hello!

I was trying this minifier as an alternative to uglify in webpack but I'm hitting some issues with source maps:

Error: original.line and original.column are not numbers -- you probably meant to omit the original mapping entirely and only map the generated position. If so, pass null for the original mapping instead of an object with empty or null values.
    at SourceMapGenerator_validateMapping [as _validateMapping] (/Users/andrecruz/Work/moxy/moxy/react-with-moxy/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:276:15)
    at SourceMapGenerator_addMapping [as addMapping] (/Users/andrecruz/Work/moxy/moxy/react-with-moxy/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:110:12)
    at /Users/andrecruz/Work/moxy/moxy/react-with-moxy/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:72:17
    at Array.forEach (<anonymous>)
    at BasicSourceMapConsumer.SourceMapConsumer_eachMapping [as eachMapping] (/Users/andrecruz/Work/moxy/moxy/react-with-moxy/node_modules/webpack-sources/node_modules/source-map/lib/source-map-consumer.js:157:14)
    at Function.SourceMapGenerator_fromSourceMap [as fromSourceMap] (/Users/andrecruz/Work/moxy/moxy/react-with-moxy/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:48:24)
    at SourceMapSource.node (/Users/andrecruz/Work/moxy/moxy/react-with-moxy/node_modules/webpack-sources/lib/SourceMapSource.js:32:35)
    at SourceMapSource.proto.sourceAndMap (/Users/andrecruz/Work/moxy/moxy/react-with-moxy/node_modules/webpack-sources/lib/SourceAndMapMixin.js:30:18)
    at getTaskForFile (/Users/andrecruz/Work/moxy/moxy/react-with-moxy/node_modules/webpack/lib/SourceMapDevToolPlugin.js:34:30)
    at files.forEach (/Users/andrecruz/Work/moxy/moxy/react-with-moxy/node_modules/webpack/lib/SourceMapDevToolPlugin.js:127:20)
    at Array.forEach (<anonymous>)
    at compilation.hooks.afterOptimizeChunkAssets.tap (/Users/andrecruz/Work/moxy/moxy/react-with-moxy/node_modules/webpack/lib/SourceMapDevToolPlugin.js:121:12)
    at SyncHook.eval [as call] (eval at create (/Users/andrecruz/Work/moxy/moxy/react-with-moxy/node_modules/tapable/lib/HookCodeFactory.js:17:12), <anonymous>:7:1)
    at SyncHook.lazyCompileHook [as _call] (/Users/andrecruz/Work/moxy/moxy/react-with-moxy/node_modules/tapable/lib/Hook.js:35:21)
    at hooks.optimizeChunkAssets.callAsync.err (/Users/andrecruz/Work/moxy/moxy/react-with-moxy/node_modules/webpack/lib/Compilation.js:947:42)
    at _err0 (eval at create (/Users/andrecruz/Work/moxy/moxy/react-with-moxy/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:11:1)

List of devtool values that are failing:

  • nosources-source-map
  • hidden-source-map
  • inline-source-map
  • source-map

If you want to reproduce the issue, clone https://github.com/moxystudio/react-with-moxy and https://github.com/moxystudio/react-with-moxy/blob/54f575f24db6b718639fcbcbe65033f1e33dd7d0/scripts/config/webpack/config-server.js#L230 to:

require("babel-minify-webpack-plugin")();

and then simply run $ npm run build.

error with sourcemaps

I reproduce this issue when I use source maps with this plugin.
My config file:

const path = require('path')
const webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MinifyPlugin = require("babel-minify-webpack-plugin");

module.exports = {
	entry: path.resolve(__dirname, './app/component/index'),
    devtool: 'source-map',
	output: {
		path: path.resolve(__dirname, './dist'),
		filename: 'app.bundle.js'
	},

	resolve: {
		extensions: ['.ts', '.tsx', '.js', '.jsx']
	},

	module: {
		rules: [{
			test: /\.tsx?$/,
			exclude: /node_modules/,
			loaders: ['ts-loader']
		}, {
			test: /\.css$/,
			include: /node_modules/,
			loaders: ['style-loader', 'css-loader']
		}, {
			test: /\.scss$/,
			use: [{
				loader: "style-loader"
			}, {
				loader: "css-loader"
			}, {
				loader: "sass-loader"
			}]
		}, {
			test: /\.(eot|svg|ttf|woff|woff2)$/,
			loaders: ['file-loader?name=fonts/[name].[ext]']
        }]
    },
    
    plugins: [
        new MinifyPlugin()
    ]
}

The error which I get is this:

/home/razorpack/develop/pyrite-prism/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:276
        throw new Error(
        ^

Error: original.line and original.column are not numbers -- you probably meant to omit the original mapping entirely and only map the generated position. If so, pass null for the original mapping instead of an object with empty or null values.
    at SourceMapGenerator_validateMapping [as _validateMapping] (/home/razorpack/develop/pyrite-prism/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:276:15)
    at SourceMapGenerator_addMapping [as addMapping] (/home/razorpack/develop/pyrite-prism/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:110:12)
    at /home/razorpack/develop/pyrite-prism/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:72:17
    at Array.forEach (<anonymous>)
    at BasicSourceMapConsumer.SourceMapConsumer_eachMapping [as eachMapping] (/home/razorpack/develop/pyrite-prism/node_modules/webpack-sources/node_modules/source-map/lib/source-map-consumer.js:157:14)
    at Function.SourceMapGenerator_fromSourceMap [as fromSourceMap] (/home/razorpack/develop/pyrite-prism/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:48:24)
    at SourceMapSource.node (/home/razorpack/develop/pyrite-prism/node_modules/webpack-sources/lib/SourceMapSource.js:32:35)
    at SourceMapSource.proto.sourceAndMap (/home/razorpack/develop/pyrite-prism/node_modules/webpack-sources/lib/SourceAndMapMixin.js:30:18)
    at getTaskForFile (/home/razorpack/develop/pyrite-prism/node_modules/webpack/lib/SourceMapDevToolPlugin.js:33:30)
    at chunk.files.forEach.file (/home/razorpack/develop/pyrite-prism/node_modules/webpack/lib/SourceMapDevToolPlugin.js:91:21)
    at Array.forEach (<anonymous>)
    at /home/razorpack/develop/pyrite-prism/node_modules/webpack/lib/SourceMapDevToolPlugin.js:89:18
    at Array.forEach (<anonymous>)
    at Compilation.<anonymous> (/home/razorpack/develop/pyrite-prism/node_modules/webpack/lib/SourceMapDevToolPlugin.js:88:12)
    at Compilation.applyPlugins1 (/home/razorpack/develop/pyrite-prism/node_modules/tapable/lib/Tapable.js:75:14)
    at self.applyPluginsAsync.err (/home/razorpack/develop/pyrite-prism/node_modules/webpack/lib/Compilation.js:670:11)
    at next (/home/razorpack/develop/pyrite-prism/node_modules/tapable/lib/Tapable.js:202:11)
    at Compilation.<anonymous> (/home/razorpack/develop/pyrite-prism/node_modules/babel-minify-webpack-plugin/dist/index.js:119:11)
    at Compilation.applyPluginsAsyncSeries (/home/razorpack/develop/pyrite-prism/node_modules/tapable/lib/Tapable.js:206:13)
    at self.applyPluginsAsync.err (/home/razorpack/develop/pyrite-prism/node_modules/webpack/lib/Compilation.js:666:10)
    at Compilation.applyPluginsAsyncSeries (/home/razorpack/develop/pyrite-prism/node_modules/tapable/lib/Tapable.js:195:46)
    at sealPart2 (/home/razorpack/develop/pyrite-prism/node_modules/webpack/lib/Compilation.js:662:9)
    at Compilation.applyPluginsAsyncSeries (/home/razorpack/develop/pyrite-prism/node_modules/tapable/lib/Tapable.js:195:46)
    at Compilation.seal (/home/razorpack/develop/pyrite-prism/node_modules/webpack/lib/Compilation.js:605:8)
    at applyPluginsParallel.err (/home/razorpack/develop/pyrite-prism/node_modules/webpack/lib/Compiler.js:508:17)
    at /home/razorpack/develop/pyrite-prism/node_modules/tapable/lib/Tapable.js:289:11
    at _addModuleChain (/home/razorpack/develop/pyrite-prism/node_modules/webpack/lib/Compilation.js:507:11)
    at processModuleDependencies.err (/home/razorpack/develop/pyrite-prism/node_modules/webpack/lib/Compilation.js:477:14)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] production: `webpack --config ./webpack.production.config.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] production script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/razorpack/.npm/_logs/2017-11-09T19_15_16_251Z-debug.log

When I use the source maps without this plugin it works fine.
The version plugin is: 0.2.0

webpack-defaults upgrade

Addition of webpack-defaults & associated refactoring as a part of the next Major release

Issue exists for status tracking across the organization.

Please do not close

invalid option topLevel

To enable optimizations to take place in the top level scope of the file, use topLevel: true in minifyOptions.

I tried to set topLevel: true in minifyOption. Unfortunately I got error invalid option topLevel when bundling. I have checked this link, there is no topLevel option in babel-preset-minify.

Maybe topLevel option will be provided in pluginOpts in the next release.

Improve the minification speed

Minification sample: @angular/core.

0.2.0 consumes 20 seconds of precious developer time on default settings (unfortunately, I had to use cheap-module-source-map and turn off the devtool: 'source-map' setting because of the weird bug #68).

Bundling with UglifyJSPlugin takes 2 seconds with "generator" settings (mangle and compress equals false), and 8 seconds on maximum settings (with compress: { passes: 2 }).

Bundling the same code with webpack without any minifiers, then passing the generated bundle to the babylon parser, and printing the resulting AST with @babel/generator takes 3 seconds.

The "generator" settings are very important nowadays, when everything can be gzipped and sent over HTTP/2.

The fancy ES Modules do have unsolvable problem of race conditions on updates, so bundling will be always actual and necessary on serious deployments with high loads.

One interesting philosophy is "code isomorphism between production and development environment" which encourages developers to work with and debug the same code which clients finally use.

To simplify debugging of production bundles, use of variables mangling and compression (which may flatten nested function calls etc.) should be avoided. Such simple minification setting improves the speed of bundle code generation, which is great.

I was expecting that the plugin may do its work very fast, but even was unable to disable the mangle setting.

Add include/exclude options for filtering modules

UglifyJS webpack plugin provides include/exclude options for filtering module list to be processed.

This can ignore minifying some modules that may have already been minified or will cause bug when passed through babili,

Invalid option 'babili'

Hi, I've tried several ways to configure this plugin -- I either hit the Out Of Memory Issue with Babili itself (using all default options), or when I do try to pass options, I consistently get some error about an option property I thought was valid, and it doesn't minify or mangle anything.

Here's example output showing the latter:

 [372] ./bo/forms/payments.js 21.9 kB {0} [built]
 [414] ./pos.css 1.02 kB {1} [built]
 [555] ./boindex.js 6.28 kB {0} [built]
 [589] ./posindex.js 2.15 kB {1} [built]
    + 637 hidden modules

ERROR in Invalid option "presets"

ERROR in Invalid option "presets"

ERROR in Invalid option "presets"

ERROR in Invalid option "presets"

I've scoured github issues trying to find the correct way to configure the plugin. I must be missing something with the babili-preset-options project.

When I try to pass in some simple preset options, no matter what construction I make, it errors out and won't minify, etc.

config.plugins.push(new BabiliPlugin({
            "presets": [["babili", {
            "evaluate": false,
            "mangle": true
          }]]
        
      }, {
        test: /\.js$/i,
        comments: false,
        sourceMap: true
      }));

Could someone advise on the correct way to configure this plugin?

Name change

Babili has been renamed to babel-minify - Ref: babel/minify#124 ..

  • Change this project to babel-minify-webpack-plugin.
  • Update Travis service
  • Update Appveyor service
  • Update Codecov.io service
  • Publish on npm with new name - after babel-minify is published. I already have the name on npm.

"mangle.exclude" doesn't seem to exclude the namespaces

Hi. I'm using the latest version of this package - 0.2.0.

Issue

Providing mangle.exclude doesn't exclude the given class/method names from being mangled.

Minify options

new BabelMinifyPlugin({
      removeConsole: true,
      mangle: {
        topLevel: true,
        exclude: {
          /* I need to preserve the names of the classes listed below */
          'FormProvider': true,
          'Form': true,
          'connectField': true,
          'Condition': true,
          'Field': true
        }
      }
    })

Environment

  • Node: v6.9.5
  • OS: MacOS Sierra (10.12.6 (16G29))

Reproduce

  1. Clone/fork my repository.
  2. Checkout to dev/bundle-size branch if not there already.
  3. Run npm run build to build the project in production mode
  4. Examine the output bundle - excluded namespaces are still mangled.

Please help me resolve this issue. Thanks.

named functions excluded

The plugin seems to exclude all named functions from minified output.

Without minification the named functions exist in the webpack output, but they are no longer there when the plugin is applied.

This is one instance of a function included in myfile.js:

 `function scrollToAnchor(aid) {  
        var aTag = $("a[name='" + aid + "']");
       $('html,body').animate({
           scrollTop: aTag.offset().top
       }, 'slow');
   }
 `

On the same file, this showed up correctly on the minified version:

 `$(document).ready(function() {
       $(document).ajaxSend(function() {
            $("#spinner").show();
       });
      $(document).ajaxStop(function() {
            $("#spinner").hide();
      });
    });
 `

webpack.config.js:

 `const MinifyPlugin = require("babel-minify-webpack-plugin");
   .....
   module.exports = {
       ...
        plugins: [
            new MinifyPlugin(),
       ...
 `

babel.rc

 `{
 "presets": [
 ["env", 
 {
  "modules": false,
  "useBuiltIns": true,
  "targets": {
    "browsers": ["last 2 versions", "safari >= 7"]
  }
 }],
 "react",
 "es2015"
 ],
 "plugins": [
  "transform-object-rest-spread", 
  "transform-react-jsx",
  "transform-runtime"
  ],
"comments": false
  }
 `

Thanks

Handling Dynamic Imports

I have the following .babelrc:

{
  "presets": [
    "react",
    ["env", {
      "targets": {
        "browsers": ["Chrome 58"]
      },
      "modules": false
    }]
  ],
  "plugins": [
    "ramda",
    "syntax-dynamic-import"
  ]
}

This works for my development build, but my production build with this plugin for babili chokes on a dynamic import (complaining about an unexpected token).

Am I doing something wrong? Is this plugin supposed to inherit my .babelrc and pick up babel-plugin-syntax-dynamic-import.

Configurable transformer, plugins and presets.

Hi

Thanks for the plugin.

I am using Angular 2 Final and can't use all of the plugins listed in babel-preset-babili so it would be nice to have the option to disable presets and provide an array of plugins.

  • Will

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.