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()
]
}
Try importing
import 'jquery`;
It will add jQuery
to global context and should solve your problem