Develop Reference

Is there a way for exporting multiple default react components from a react package in rollupjs?

I want to achieve to have multiple default exports. For example, if a react app installs my package named {my-package} then, they should be be able to import like
import Add from {my-package}/Add;
import Multiply from {my-package}/Multiple;
I've tried with making multiple end points in rollup.config.js.
`
export default [
{
input: files,
output: [
{
format: 'cjs',
strict: false,
// file: pkg.main,
dir: pkg.main,
sourcemap: true,
exports: 'named'
},
{
format: 'esm',
strict: false,
dir: pkg.module,
sourcemap: true,
exports: 'named'
}
],
plugins: [
commonjs(),
nodePolyfills(),
nodeResolve({ browser: true }),
image(),
json(),
postcss({
config: {
path: './postcss.config.js'
},
extensions: ['.css', '.scss'],
minimize: true,
inject: {
insertAt: 'top'
},
plugins: [url({ url: 'inline', maxSize: 10, fallback: 'copy' })]
}),
babel({ exclude: 'node_modules/**', presets: ['#babel/preset-react'] }),
typescriptPlugin({
objectHashIgnoreUnknownHack: true,
tsconfig: './tsconfig.json'
}),
cleaner({ targets: ['./dist/'] })
],
external: [
'react',
'react-dom',
'js-beautify',
'next-themes',
'react-split',
'react-codemirror2',
'react-responsive-modal',
'pinterpolate'
]
}
];
`
This is my rollup.config.js
Is it possible witn rollupjs?

Why is no sourcemap generated when minimizing source?

I need to add source-maps to a Webpack 4 production build.
I am using the following config:
{
…
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
sourceMap: true,
}),
],
},
devtool: 'source-map'
…
}
However, although this minimises the bundle, it results in a virtually empty source-map at main.js.map:
{"version":3,"file":"main.js","sources":["webpack://AdminFrontend/main.js"],"mappings":";AAAA","sourceRoot":""}
If i set minimize to false, I get a full source-map, but the bundle is enormous.
What do I need to do to both minimize the source AND generate a full sourcemap?

you can customize webpack minimizer config like this
const minify = (input, sourceMap, minimizerOptions, extractsComments) => {
const { sourceMap: uglifySourceMap, code } = require('uglify-js').minify(input);
return { map: sourceMap, code, warnings: [], errors: [], extractedComments: [] };
}
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
sourceMap: true,
parallel: true,
minify: minify,
}),
],
},
after do that you will get full content map file

How to use Webpack & Terser to only compress code

I'm attempting to use webpack to compress my code (remove new lines and whitespaces) and nothing else. I don't want any webpack__require__, no mangling, no uglifying, simply just remove whitespace and new lines.
What options in terser/webpack do I have to put to achieve this?
let bundle = {
mode: 'production',
target: 'web',
entry: path.resolve(__dirname, './res/') + '/bundle.js',
output: {
path: path.resolve(__dirname, './res/'),
filename: 'minified.js',
},
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
ecma: undefined,
warnings: false,
parse: {},
compress: {},
mangle: false,
module: false,
toplevel: false,
keep_classnames: true,
keep_fnames: true,
}
})
]
}
};
Doesn't seem to do it. Thank you in advance.

Just to build on felismosh's answer for the CLI you will want to not include the --mangle or --compress commands if all you want to do is remove whitespace and newlines.
So it would be something more like:
terser original-file.js -o minified-file.js.
Mangle and compress are disabled unless turned on explicitly in the CLI command.

This will disable compression and use the output option for removing comments. The extractComments property prevents the plugin from extracting comments to a text file.
module.exports = {
/* ... */
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
compress: false,
output: {
comments: false,
},
},
extractComments: false,
}),
],
},
};

just use terser directly without webpack.
Run npm i terser to install it, then you will have 2 choices:
Using it's cli, terser --compress --mangle -- input.js.
Using it's api from node,
const Terser = require('terser');
const code = {
'file1.js': 'function add(first, second) { return first + second; }',
'file2.js': 'console.log(add(1 + 2, 3 + 4));',
};
const options = {
ecma: undefined,
warnings: false,
parse: {},
compress: {},
mangle: false,
module: false,
toplevel: false,
keep_classnames: true,
keep_fnames: true,
};
const result = Terser.minify(code, options);
console.log(result.code);

Looking for more Webpack production bundle optimisation

I'm trying to reduce the output size of my application's JS bundle and looking around these are the plugins that I got so far to help me on this task:
config.plugins = [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en-gb/),
new ExtractTextPlugin({ filename: "bundle.css" }),
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
pure_getters: true,
unsafe: true,
unsafe_comps: true,
screw_ie8: true,
},
output: {
comments: false,
screw_ie8: true,
},
mangle: {
screw_ie8: true,
},
sourceMap: false,
minimize: true
}),
new LodashModuleReplacementPlugin({ 'collections': true }),
new DuplicatePackageCheckerPlugin()
];
I also set devtool to undefined for production.
And this is my .babelrc where I'm also doing some optimisations:
{
"presets": [
["es2015", { "es2015": { "loose": true, "modules": false}}],
"react",
"stage-0",
],
"env": {
"development": {
"presets": ["react"]
},
"production": {
"plugins": [
["transform-react-remove-prop-types", {
"mode": "wrap",
}]
]
}
},
"plugins": ["lodash"]
}
Is there any other thing I can do? The bundle has been reduced a lot but still quite big.

Grunt JSHint works well only with 0.9.2

I got grunt-contrib-jshint to validate JS files. Problem arises when I change jshint version to other than 0.9.2. Configuration Gruntfile.js
jshint: {
options: {
jshintrc: '.jshintrc',
reporter: require('jshint-stylish')
},
all: [
'Gruntfile.js',
'<%= config.app %>/scripts/**/*.js',
'!<%= config.app %>/content_scripts/coffee/*'
]
}
and .jshintrc
{
"node": true,
"browser": true,
"esnext": true,
"bitwise": true,
"curly": true,
"eqeqeq": true,
"immed": true,
"indent": 2,
"latedef": true,
"newcap": true,
"noarg": true,
"quotmark": "single",
"regexp": true,
"undef": false,
"unused": false,
"strict": false,
}
So when I update to newest version 0.11.2 JSHint works but shows No problems while on 0.9.2 shows couple of various error.
Please help.