I'm using rollup-plugin-uglify with rollup
I got development and production version of my JS bundle and I want on dev mode.
keep my file beautify though I'm using uglify
I tried to specified it as follows (on development build):
import uglify from 'rollup-plugin-uglify';
export default {
entry: 'myfile.js',
dest: 'mybundle.js',
plugins: [uglify({
beautify: true,
mangle: false,
compress:false
})]
}
I'm using rollup-plugin-uglify with rollup
I got development and production version of my js bundle and I want on development mode
keep my file beautify though i'm using uglify
But unfortunately the file output still uglified.
Any idea?
If you will look at uglify api https://github.com/mishoo/UglifyJS2/blob/master/README.md#api-reference, you'll see that 'beautify' option has 'output' namespace. Rollup plugin just directly passed options to uglify.
Related
I'm migrating a web app from requireJS to webpack.
With requireJS, I have different configurations depending on the environment.
For live environment I use r.js to minify and bundle all of my
modules and their dependencies into a single file. Afterwards, I add
almondJS to manage the dependencies and then I load my js bundle like the following:
<script src="bundle.min.js"></script>
For my development environment, I Load requireJS like this:
<script src="require.js" data-main="/main-config"></script>
and requireJS will use my configuration file specified by data-main, to load modules and their
dependencies asynchronously
As you can see, with requireJS module loading and bundling are two separate processes and that allows me to debug AMD modules during development without needing sourcemaps
How can I achieve this scenario using webpack as a module loader only without bundling during development ?
If this is not possible, is there any other way I can see my source files in the browser debugger without generating sourcemaps?
How can I achieve this scenario using webpack as a module loader only without bundling during development ?
Webpack will always bundle, despite the envieronment.
If this is not possible, is there any other way I can see my source files in the browser debugger without generating sourcemaps?
If your code is transpiled/compiled, you'll need sourcemaps to see that. There is no way to workaround that.
It's true that if your code is transpiled then you'll need sourcemaps. But it is possible to get around bundling though. Yes, webpack will really always try to bundle, but with plugins the code can be taken out of the bundle and placed in the output directory as if it was simply run through the transpiler.
I have a node application that I want to simply transpile to ES5 file-by-file and not bundle anything. So my config to do that is roughly this:
let config = {
entry: [
glob.sync(srcDir + '/**/*.js') // get all .js files from the source dir
],
output : {
filename : '[name].rem.js', // webpack wants to bundle - it can bundle here ;)
path: outDir
},
resolve: {
alias: {
'app': appDir
}
},
plugins: [
new RemoveEmptyScriptsPlugin({extensions: ['js'], scriptExtensions: /\.rem\.js/}) // for all .js source files that get bundled remove the bundle .rem.js file
],
module: {
rules:[{
test: /\.jsx?$/,
type: 'asset/resource', // get webpack to take it out instead of bundling
generator: {
filename: ({filename}) => filename // return full file name so directory structure is preserved
},
use: {
loader: 'babel-loader',
options: {
targets: { node: 16 },
presets: [
['#babel/preset-env', { modules: 'commonjs' /* transpile import/export */}],
]
}
}
}]
}
};
// Since the code does not go through the full pipeline and imports are not getting resolved, aliases will remain in the code.
// To resolve them it takes to hack the aliases object into the babel config
config.module.rules[0].use.options.plugins.push(['babel-plugin-webpack-alias-7', {config: {resolve: {alias: config.resolve.alias}}}];
But then it appeared that the currently published babel-plugin-webpack-alias-7 does not support providing an Object to the config option so I had to patch the plugin https://github.com/shortminds/babel-plugin-webpack-alias-7/pull/22
Ah, and then the webpack-remove-empty-scripts plugin had an issue with my idea so I had to patch that too https://github.com/webdiscus/webpack-remove-empty-scripts/pull/6
I want to create a frontend library.
Therefore I want to use webpack. I especially like the css and image loader.
However I can only require non-JS files if I am using webpack.
Because I am building a library, I cannot garanty that the user of my library will too.
Is there I way to bundle everything into a UMD module to publish it?
I tried using multiple entry points, however I cannot require the module then.
You can find good guide for creating libraries in Webpack 2.0 documentation site. That's why I use ver 2 syntax in webpack.config.js for this example.
Here is a Github repo with an example library.
It builds all files from src/ (js, png and css) into one JS bundle which could be simply required as an umd module.
for that we need to specify the follow settings in webpack.config.js:
output: {
path: './dist',
filename: 'libpack.js',
library: 'libpack',
libraryTarget:'umd'
},
and package.json should have:
"main": "dist/libpack.js",
Note that you need to use appropriate loaders to pack everything in one file. e.g. base64-image-loader instead of file-loader
The comment written by #OlegPro is very helpful. I suggest every one to read this article for explanation of how these stuff work
http://krasimirtsonev.com/blog/article/javascript-library-starter-using-webpack-es6
You need the following for sure if you want to be able to import the bundle file in your project
output: {
path: path.resolve(__dirname, myLibrary),
filename: 'bundle.js',
library: "myLibrary", // Important
libraryTarget: 'umd', // Important
umdNamedDefine: true // Important
},
I want webpack to process js file (minify/uglify) but not format it as a module - so it would be just raw js file containing only the initial code (minified/uglified) without any webpackJsonp.
I need such a file to load it before webpack is loaded in a browser, to detect if custom font is loaded. If I use webpack module to do it then my bundle is loaded after font file is loaded.
Set your target to node in webpack.config.js (the default is web)
module.exports = {
target: 'node'
};
In the example above, using node webpack will compile for usage in a
Node.js-like environment (uses Node.js require to load chunks and not
touch any built in modules like fs or path).
Alternatively, if this is not appropriate for your use, you can also just change the libraryTarget in the output (assuming you are using CommonJS):
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name].js',
libraryTarget: 'commonjs'
},
libraryTarget: "commonjs" - The return value of your entry point will
be assigned to the exports object using the output.library value. As
the name implies, this is used in CommonJS environments.
You should have (depends on version) scripts() or babel() methods that only minify instead of js() that webpackfy also:
mix.js('resources/js/app.js', 'public/js/app') //this add a webpack module
.scripts(['resources/js/scrips/raw.js', 'resources/js/scrips/raw2.js',], 'public/js/raws.js')//this add a minified js
.babel(['resources/js/scrips/raw3.js', 'resources/js/scrips/raw4.js',], 'public/js/raws_retrocompatible.js')//this add a minified js, but using babel compiler
I start to learn react js and they say on the react website "We recommend using React with a CommonJS module system like browserify"
So I used browserify with a simple hello world react component. Finally it produces an output file bundle.js of 651 ko (just for a simple hello world).
With this file bundle.js, I no longer have to include the scripts react.js and react-dom.js in my webpage, so I concluded that the file bundle.js includes my component and the react library.
But if I creates many components, I will have some javascript files and after the browserify transformation, each output files will be big because each files contains the react library. it will produce only one output file.
So I don't understand why they recommend to use browserify rather than just include react.js and react-dom.js library into my webpage and also my components js files after a babel transformation?
For development it is better not to minify. You apply minify when you go to production. For example with gulp;
gulp.task('appjs', function(){
browserify({ debug: true })
.transform(babel.configure({stage: 0}))
.require(source.appjs, { entry: true })
.bundle()
.pipe(vsource('app.min.js'))
.pipe(gulp.dest('./ui-dist'));
});
gulp.task('buildapp', function(){
browserify({ debug: false })
.transform(babel)
.require(source.appjs, { entry: true })
.bundle()
.pipe(vsource('app.min.js'))
.pipe(vbuffer())
.pipe(uglify())
.pipe(gulp.dest('./ui-dist'));
});
I think your question is about the size of the bundle file (the resulted file of browserify build), you worry about the time it will take when loaded on the page. This is some really important things you should know :
1. you don't have to include all your files in one bundle : you can generate multiple bundles. For example, you can configure browserify to create one bundle for your vendor files, and one or multiple bundles for your components.
in Dev mode, you don't have to minify your bundle,
For prod, you should generate your bundle using the react prod mode and minification.
To achieve point 1 (multiple bundles), here is an example with grunt browserify plugin.
var jsFiles = {
jsSrcFiles: './src/main/js/vs/**/*.js*', // my js and jsx source files
jsLibs: [
// vendor libs that I want to put in separate bundle
'react/addons',
...
]
};
...
browserify: {
app: {
options: {
transform: ['reactify'],
extensions: ['.jsx'],
// Here is where I tell browserify not to bundle vendor files with my source files
external: jsFiles.jsLibs
},
src: [jsFiles.jsSrcFiles],
dest: buildParams.js + '/vs_app.js'
},
// here is where I build vendor files in separate bundle named vendor.js
vendor: {
src: ['.'],
dest: buildParams.js + '/vendor.js',
options: {
alias: jsFiles.jsLibs
}
}
}...
Browserify is a great tool when it comes to small projects, when your project becomes more complex, browserify config tends to be very complex. In order to have more control of your built bundles, I recommend to use webpack, which is also a tool that facebook recommends. It allows easy bundling customization...
I am using requirejs to build frontend on play 2.2 framework. play provides great development/stage code difference for this case. In devel mode I am working with browser based requirejs and in stage I am using precompiled with r.js version of the project. But one feature fails - is it possible to distinguish on javascript side is it development mode or not and remove part of code during compilation or something like:
#ifdef DEVELOPMENT
code in Development only
#endif
By default r.js uses UglifyJS to optimize your modules. In r.js' configuration you can use the uglify option to send configuration options to UglifyJS. For instance,
uglify: {
defines: {
DEV: ['name', 'false']
}
},
This would tell uglifyjs replace every instance of the symbol DEV with the name false. Then, parts like this:
if (DEV) {
// ....
}
would be automatically removed by uglifyjs as being unreachable.
See uglifyjs' documentation for the details of how that works.
You might also want to look at UglifyJS2, because it perhaps does more than UglifyJS. You can tell r.js to use it by setting the optimize option to uglify2, and use the uglify2 option to control what it does.
UglifyJS2 from sbt-rjs 1.0.7 already has some other usefull option:
uglify: {
drop_console: true
}
uglify2: {
compress: { drop_console: true }
}
it removes all console.log messages from minified script.