Skip to content

Instantly share code, notes, and snippets.

@jcao02
Last active September 13, 2020 15:07
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jcao02/776e06073395dc8c2ecac5845f8765dd to your computer and use it in GitHub Desktop.
Save jcao02/776e06073395dc8c2ecac5845f8765dd to your computer and use it in GitHub Desktop.
Rollup configuration for VueJS SFC + TypeScript tree-shakable library
{
"name": "your-library-name",
"version": "0.1.0",
"module": "dist/index.js",
"sideEffects": false,
"scripts": {
"build": "rollup --config ./config/rollup.config.js",
"serve": "rollup --config ./config/rollup.config.js --watch",
"test": "jest --config ./config/jest.config.js --rootDir ."
},
"devDependencies": {
"@betit/rollup-plugin-rename-extensions": "^0.0.4",
"@types/jest": "^24.0.15",
"@vue/test-utils": "^1.0.0-beta.29",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-vue": "^2.0.2",
"jest": "^24.8.0",
"jest-serializer-vue": "^2.0.2",
"postcss": "^7.0.17",
"rollup": "^1.16.7",
"rollup-plugin-cleaner": "^1.0.0",
"rollup-plugin-commonjs": "^10.0.1",
"rollup-plugin-typescript2": "^0.22.0",
"rollup-plugin-vue": "^5.0.1",
"standard-changelog": "^2.0.18",
"ts-jest": "^24.0.2",
"ts-loader": "^6.0.4",
"typescript": "^3.5.3",
"vue": "^2.6.10",
"vue-jest": "^3.0.4",
"vue-loader": "^15.7.0",
"vue-property-decorator": "^8.2.1",
"vue-template-compiler": "^2.6.10"
},
"peerDependencies": {
"vue": "^2.6.10"
}
}
import vue from ‘rollup-plugin-vue’
import typescript from ‘rollup-plugin-typescript2’
import renameExtensions from ‘@betit/rollup-plugin-rename-extensions’
import cleaner from ‘rollup-plugin-cleaner’
import commonjs from ‘rollup-plugin-commonjs’
export default {
input: ‘index.js’,
output: {
format: ‘esm’, // This is what tells rollup to use ES6 modules
dir: ‘dist’
},
external: [ ‘vue’, ‘vue-class-component’ ],
plugins: [
cleaner({ targets: [ ‘dist’ ] }),
commonjs(),
typescript({ rollupCommonJSResolveHack: true, clean: true }),
// This extension renames all .vue and .ts to .js
// (and updates the imports)
renameExtensions({
include: [‘**/*.ts’, ‘**/*.vue’],
mappings: { ‘.vue’: ‘.vue.js’, ‘.ts’: ‘.js’ }
}),
vue()
],
// Prevents bundling, but doesn’t rename files
preserveModules: true
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment