webpack-contrib / babel-minify-webpack-plugin Goto Github PK
View Code? Open in Web Editor NEW[DEPRECATED] Babel Minify Webpack Plugin
License: MIT License
[DEPRECATED] Babel Minify Webpack Plugin
License: MIT License
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
This plugin still depends on babel-core 6.23. Any possibility of updating to @babel/core
instead?
https://www.npmjs.com/package/babili-webpack-plugin
npmjs still has 0.1.2 listed as the newest release. Possibly something is wrong with your commit hooks?
Hi. I'm using the latest version of this package - 0.2.0
.
Providing mangle.exclude
doesn't exclude the given class/method names from being mangled.
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
}
}
})
dev/bundle-size
branch if not there already.npm run build
to build the project in production modePlease help me resolve this issue. Thanks.
Hi, wanted to move from uglify to babel-minify, but it breaks draftjs in production, even with the simplest boilerplate code.
[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')
);
The code crashes with error below:
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..
I have set {comments: null}
(just a personal preference, null
is a falsy value) in PluginOpts and it broke my build with the ERROR in unknown: Cannot read property 'test' of null
. I was confused for quite some time untill I guessed to set comments
explicitly to false
and it worked.
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?
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)
development
mode (devtool enabled)What can I do to make progress on this - I feel pretty stuck.
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?
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
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 -
// 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
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!
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 -v
v8.5.0
This:
const message = [`Hey`, `Jude`].join('\n');
console.log(message);
Is minified to this:
function(){console.log('\n')}
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')}]);
https://github.com/alshakero/webpack_bug
npm install
.npm run build
You should see the results in dist
with obvious names.
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
})
]
}
Works fine without babili-webpack-plugin
Repro:
git clone https://github.com/damianobarbati/mdi/tree/v1.0.14
yarn install
yarn build:prod
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?
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');
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.
babili-preset-0.0.9 has some important fixes...
The release doesn't contain any files, see https://unpkg.com/[email protected]/.
Might be related to the recent name change #54.
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
.
Babili has been renamed to babel-minify - Ref: babel/minify#124 ..
babel-minify-webpack-plugin
.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) ],
As a peer dependency, users are free to install whichever version of babili they want to use, rather than being stuck on the version in this plugin's package.json
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]
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
Can you publish new version of the package to npm to bring changes from b6b47d0
( use the newest babel-preset-babili
)
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
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
}
}
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??
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.
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.
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",
I'm trying to use babili to do my minification instead of uglify whenever I run webpack -p
.
How do I do that? I can't seem to stop it.
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
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.
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
It might be expected behavior but it's not very obvious
Can anyone please give me an example of using this plugin with React?
Have no idea about how to configure it, thanks!
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,
Hi, thanks for your effort !
Is there a way to transform minified code into es5 code?
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:
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
.
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
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.
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.
Dealing with webpack@4 migration and investigating uglify-es I noted the following: https://github.com/webpack-contrib/uglifyjs-webpack-plugin#parallel
Would this feature be possible too here?
I'm not sure whether it really means any improvement when minifying a "unique" big bundle or if it's just intended as parallel minifying of "smaller independent bundles/chunks".
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.