Error unexpected character note that you need plugins to import files that are not javascript

I wrote earlier about how to use Rollup.js to bundle modules written in JavaScript but what if source files are written in TypeScript? Rollup itself can’t do transpiling so we have to instruct it to use a Typescript transpiler (typescript package).

If we have TS source file C:devgithubdemo-typescript-rollupsrcindex.ts:

and C:devgithubdemo-typescript-rolluprollup.config.js:

export default [{
    input: ‘src/index.ts’,
    output: {
        file: ‘dist/bundle.js’,
        format: ‘cjs’
    }
}];

…running Rollup would report an error like:

We need to install rollup-plugin-typescript (among other packages):

C:devgithubdemo-typescript-rollup>npm install —save-dev typescript rollup rollup-plugin-typescript tslib
npm notice created a lockfile as package-lock.json. You should commit this file.
+ tslib@1.9.3
+ rollup@0.66.5
+ typescript@3.1.1
+ rollup-plugin-typescript@1.0.0
added 48 packages from 70 contributors in 13.156s

If we don’t install tslib and try to run Rollup we’ll get an error like:

$ npx rollup -c
[!] Error: Cannot find module ‘tslib/tslib.es6.js’ from ‘/home/bojan/my_app/node_modules/rollup-plugin-typescript/dist’

This is because tslib is a peer dependency of rollup-plugin-typescript:

$ npm list
…
├─┬ rollup-plugin-typescript@1.0.1
…
├── UNMET PEER DEPENDENCY tslib@*
…

Let’s now modify config file so it adds typescript plugin into the Rollup processing chain:

If we run Rollup now, it will use typescript plugin to transpile TS code to JS which will be successfully bundled:

To see the entire project on GitHub, go here.

References:

https://github.com/rollup/rollup-plugin-typescript
https://medium.com/@paleo.said/how-to-bundle-an-npm-package-with-typescript-and-rollup-f80e0f196189

TODO:

Try using https://www.npmjs.com/package/rollup-plugin-typescript2.

This is my code. I want build Vuejs components. But tip error message when building.

SCSS and PostCSS plugin are unless.

import nodeResolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import { babel } from '@rollup/plugin-babel'
import { terser } from 'rollup-plugin-terser'
import { eslint } from 'rollup-plugin-eslint'
import image from '@rollup/plugin-image'
import alias from '@rollup/plugin-alias'
import vuePlugin from 'rollup-plugin-vue'

const isDev = process.env.NODE_ENV !== 'production'

export default [
    {
        input: 'src/index.js',
        external: ['ms'],
        output: [
            {
                name: 'cjs',
                file: 'lib/index.js',
                format: 'cjs',
                plugins: [
                    babel({
                        exclude: 'node_modules/**', 
                        babelHelpers: 'runtime'
                        // runtimeHelpers: true 
                    })
                ]
            },
            {
                name: 'cjs',
                file: 'lib/index.min.js',
                format: 'cjs',
                plugins: [
                    terser(),
                    babel({
                        exclude: 'node_modules/**',
                        extensions: [
                            '.js', '.jsx', '.ts', '.tsx', '.vue'
                        ],
                        babelHelpers: 'runtime'
                        // runtimeHelpers: true 
                    })
                ]
            },
            {
                name: 'es',
                file: 'es/index.js',
                format: 'es'
            },
            {
                name: 'umd',
                file: 'dist/index.js',
                format: 'umd',
                plugins: [isDev && terser()]
            }
        ],
        plugins: [
            eslint({
                // fix: true,
                // throwOnError: true,
                // throwOnWarning: true,
                include: ['src/**'],
                exclude: ['node_modules/**']
            }),
            alias({
                entries: [
                    {
                        find: '@assets',
                        replacement: './src/assets'
                    }
                ]
            }),
            // scss({
            //     output: 'dist/main.css'
            // }),
            vuePlugin({
                // css: false
                // preprocessStyles: false
                // preprocessOptions: {
                //     scss: {
                //         additionalData: `@import 'src/assets/styles/varibles.scss'`,
                //         data: `@import 'src/assets/styles/mixins.scss'`
                //     }
                // }
            }),

            // postcss({
            //     use: {
            //         sass: {
            //             data: [
            //                 `@import 'src/assets/styles/varibles.scss'`,
            //                 `@import 'src/assets/styles/mixins.scss'`
            //             ]
            //         }
            //     }
            // }),
            image(),
            nodeResolve()
            commonjs(),
        ]
    }
]