plugin generates multiple cache folders for same TS project -- different Rollup input/output

What happens and why it is wrong

TS plugin use entire Rollup options to generate hash code as a part of cache folder name. It means always generate new cache folder even input file is in the same TypeScript project.

Versions

• typescript: 3.6.2
• rollup: 1.20.3
• rollup-plugin-typescript2: 0.24.0

rollup.config.js

page1

{
        input: 'src/js/page1.ts',
        output: {
            name: 'Page1',
            file: 'src/build/page1.js',
        },
        treeshake: true,
        output: {
            format: 'iife'
        },
        onwarn(warning) {
            if (warning.code === 'EVAL') return;

            console.warn(warning.code + ': ' + warning.message);
        },
        plugins: [
            resolve({
                modulesOnly: false,
                extensions: ['.js', '.json', '.css']
            }),
            sourcePlugin,
            json({
                include: 'src/**/*.json',
                preferConst: true
            }),
            html({
                include: ['src/**/*.html', 'src/**/*.svg'],
                htmlMinifierOptions: {
                    caseSensitive: true,
                    collapseWhitespace: true,
                    collapseBooleanAttributes: true,
                    removeComments: true
                }
            }),
            url({
                limit: 10 * 1024, // inline files < 10k, copy files > 10k
                include: ["src/**/*.png"],
                emitFiles: false
            }),
            less({
                // Generate CSS separately
                output: options.output.file.replace('.js', '.css'),
                exclude: [],
                option: {
                    plugins: [
                        cleanCSSPlugin
                    ]
                }
            }),
            terser({
                // https://github.com/terser-js/terser#minify-options
                compress: {},
                output: {},
                // https://github.com/mishoo/UglifyJS2/issues/1753
                mangle: {
                    safari10: true
                }
            }),
        ]
    }

page2

{
        input: 'src/js/page2.ts',
        output: {
            name: 'Page2',
            file: 'src/build/page2.js',
        },
        ...
}

page3

{
        input: 'src/js/page3.ts',
        output: {
            name: 'Page3',
            file: 'src/build/page3.js',
        },
        ...
}

page4

{
        input: 'src/js/page4.ts',
        output: {
            name: 'Page4',
            file: 'src/build/page4.js',
        },
        ...
}

page5

{
        input: 'src/js/page5.ts',
        output: {
            name: 'Page5',
            file: 'src/build/page5.js',
        },
        ...
}

tsconfig.json in src folder

{
  "extends": "../configs/tsconfig.base",
  "compilerOptions": {
    "composite": true,
    "module": "amd",
    "outDir": "./build",
    "baseUrl": ".",
    "declaration": true,
    "declarationMap": true,
    "sourceMap": false,
    "types": []
  },
  "include": [ "**/*.ts", "**/*.json" ],
  "exclude": [ "build", "lib" ]
}

tsconfig.base in config folder

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es2016",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "noEmitHelpers": true,
    "strictFunctionTypes": true,
    "alwaysStrict": true,
    "experimentalDecorators": true,
    "keyofStringsOnly": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    // Common ES2016 - Proxy
    "lib": [
      "dom",
      "dom.iterable",
      "es5",
      "es2015.core",
      "es2015.collection",
      "es2015.iterable",
      "es2015.promise",
      "es2016.array.include",
      "es2017.object"
    ],
    "plugins": [
      {
        "name": "typescript-tslint-plugin",
        "ignoreDefinitionFiles": true
      }
    ]
  }
}

[Soul-Master]

Thanks again for your advise. I compile TypeScript project as ES6 module to cache folder and use the following Rollup options to resolve TypeScript files.

{
   resolveId(id, importer) {
       let absPath = path.resolve(path.dirname(importer), id);
       const fileName = path.basename(absPath);        

       if (!fileName.includes('.')) {
           return absPath + '.ts';
       }

       return null;
   },
   load(id) {
       if (id.slice(-3) !== '.ts') return null;

       const es6File = cacheFolderPath + id.substring(srcFolderPath.length, id.length - 2) + 'js';

       return { code: fs.readFileSync(es6File, 'utf-8') };
   }
}

It reduces compile time for 12 pages around 60%.

[ezolenko]

So you are using same input typescript and get exactly the same output bundle from rollup, just in several different names (so page1.js === page2.js === etc)? Or are the bundles different?

RE: fixed cache, you can get the same effect if you precompile ts files into js (either as a separate rollup run, or by using tsc directly), and then use js directly in your many following rollup calls.