How to make uglify and grunt index all imports and generate one single file

Question

I have just started using grunt and I want it to use combine all files and uglify them. But my issues is that it combines and uglifys, but it doesn't remove import statements. (I'm using uglify and concat)

What I want -

// File.js
import something from './something.js';
something.someFunction("hello world");

and

// something.js
export default {
   someFunction: function(msg){console.log(msg)}
}

to

// all.js
var something = {
  someFunction: function(msg){
     console.log(msg)
  }
}
something.someFunction("hello world");

Compressing is not an issue.

Answer 1

If you want to combine the source code into one file, you can use rollup.js to help you.

1. download Node.js to get npm
2. update npm: npm install -g npm
3. npm install -g rollup
   • check: rollup -v

And then, running the below command will work as you expected.

rollup --format es --input file.js -o all.js

---

You can generate by rollup.config.js also.

rollup -c

// rollup.config.js
const AUTHOR = ""
const OutputFileName = `bundle` // in your case is `all`.js
const banner = `// Copyright (c) ..., all right reserved.`
const footer = `// powered by ${AUTHOR}`

export default {
  input: './index.js', // in your case is `File.js`
  output: [
    {
      file: `./${OutputFileName}.js`,
      format: 'es', // amd, umd, iife, cjs, ...
      // 👇 Option
      // banner,
      // footer
    },
    { // You can generate different formats at once.
      file: `./${OutputFileName}_cjs.js`,
      format: 'cjs',
      banner,
      footer,
    },
  ]
}

For compress

• get uglifyjs: npm install uglify-js -g
• uglifyjs all.js -m -c -o all.min.js