How to include dependencies with typescript in rollup?

Question

I'm setting up a typescript project using rollup. Below is my rollup config so far.

Now I need to include jQuery. With typescript alone I'd install @types/jquery and that would be it.

Rollup however does not seem to include jQuery in bundle it creates, and even though tslint has no objections, I get $ is not defined at runtime. How can I pack jquery along with rest of js?

import * as fs from 'fs';
import resolve from 'rollup-plugin-node-resolve';
import typescript from 'rollup-plugin-typescript2';
import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload';
import scss from 'rollup-plugin-scss';

import sass from 'node-sass';
import postcss from 'postcss';
import autoprefixer from 'autoprefixer';
import CleanCSS from 'clean-css';

export default {
  input: './src/main.ts',
  output: {
        file: './bundle.js',
        format: 'iife',
        name: 'monoblockPanel'
    },
  plugins: [
        resolve(),
    typescript(),
    scss({
      output: function(styles, styleNodes) {
        postcss([autoprefixer]).process(styles).then(result => {
          result.warnings().forEach(warn => {
            console.warn(warn.toString());
          });
          let minified = new CleanCSS({}).minify(result.css);
          fs.writeFileSync('./styles.css', minified.styles);
        });
      }
    }),
    serve({
            host: '127.0.0.1',
            port: 4201,
            contentBase: '.'
        }),
    livereload()
  ]
}

I'm not familiar with rollup but I found and interesting answer here: github.com/rollup/rollup/issues/592#issuecomment-205692535 and here github.com/rollup/rollup/issues/592#issuecomment-205783255 — The Segfault
– The Segfault, Commented Apr 3, 2018 at 10:57

mleko · Accepted Answer · 2018-04-03 11:03:27Z

2

Try importing

import 'jquery`;

It will add jQuery to global context and should solve your problem

answered Apr 3, 2018 at 11:03

mleko

12.3k7 gold badges53 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to include dependencies with typescript in rollup?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related