mgdodge/babel.config.js

## babel.config.js
// File Location: babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', { modules: false }],
  ],
  plugins: [
    ['snowpack/assets/babel-plugin.js', {}],
  ]
};

## index.html
<!-- File Location: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head><title>Snowpack - Simple Example</title></head>
  <body>
    <div id="app">
        <my-hello></my-hello>
    </div>
    <script type="module" src="/lib/app.js"></script>
  </body>
</html>

## package.json
// File Location: package.json
{
  "name": "snowpack-demo",
  "version": "1.0.0",
  "scripts": {
    "prepare": "npm run transpile && snowpack --clean --include 'lib/**/*.js'",
    "transpile": "rollup --config ./rollup.config.js"
  },
  "dependencies": {
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "rollup": "^1.30.1",
    "rollup-plugin-babel": "^4.3.3",
    "rollup-plugin-multi-input": "^1.0.3",
    "rollup-plugin-vue": "^5.1.6",
    "snowpack": "^1.1.2",
    "vue-template-compiler": "^2.6.11"
  }
}

## rollup.config.js
// File Location: rollup.config.js
import vue from 'rollup-plugin-vue';
import multiInput from 'rollup-plugin-multi-input';
import babel from 'rollup-plugin-babel';

const dest = 'web_modules/';
const destRgx = new RegExp(`^.*(${dest})`);

export default {
  external(id) {
     return destRgx.test(id);
  },
  input: ['src/**/*.vue', 'src/**/*.js'],
  output: {
    format: 'esm',
    dir: 'lib',
    paths(id) {
      // Restore root-relative paths for web_modules
      return id.replace(destRgx, '/$1');
    },
  },
  plugins: [
    multiInput(),
    vue(),
    babel({
      exclude: 'node_modules/**' // only transpile our source code
    }),
  ]
}

## src_app.js
// File Location: src/app.js
import Vue from 'vue/dist/vue.esm.browser';
import hello from './hello.vue';

Vue.component('my-hello', hello);

new Vue({
    el: '#app',
});

## src_hello.vue
<!-- File Location: src/hello.vue -->
<template>
  <h1 :class="$style.h1">Hello {{ name }}</h1>
</template>

<script>
export default {
  data() {
    return { name: 'John Doe' }
  }
}
</script>

<style lang="scss" module>
.h1 {
  color: red;
}
</style>
	// File Location: babel.config.js
	module.exports = {
	presets: [
	['@babel/preset-env', { modules: false }],
	],
	plugins: [
	['snowpack/assets/babel-plugin.js', {}],
	]
	};
	<!-- File Location: index.html -->
	<!DOCTYPE html>
	<html lang="en">
	<head><title>Snowpack - Simple Example</title></head>
	<body>
	<div id="app">
	<my-hello></my-hello>
	</div>
	<script type="module" src="/lib/app.js"></script>
	</body>
	</html>
	// File Location: package.json
	{
	"name": "snowpack-demo",
	"version": "1.0.0",
	"scripts": {
	"prepare": "npm run transpile && snowpack --clean --include 'lib/*/.js'",
	"transpile": "rollup --config ./rollup.config.js"
	},
	"dependencies": {
	"vue": "^2.6.11"
	},
	"devDependencies": {
	"rollup": "^1.30.1",
	"rollup-plugin-babel": "^4.3.3",
	"rollup-plugin-multi-input": "^1.0.3",
	"rollup-plugin-vue": "^5.1.6",
	"snowpack": "^1.1.2",
	"vue-template-compiler": "^2.6.11"
	}
	}
	// File Location: rollup.config.js
	import vue from 'rollup-plugin-vue';
	import multiInput from 'rollup-plugin-multi-input';
	import babel from 'rollup-plugin-babel';

	const dest = 'web_modules/';
	const destRgx = new RegExp(`^.*(${dest})`);

	export default {
	external(id) {
	return destRgx.test(id);
	},
	input: ['src/*/.vue', 'src/*/.js'],
	output: {
	format: 'esm',
	dir: 'lib',
	paths(id) {
	// Restore root-relative paths for web_modules
	return id.replace(destRgx, '/$1');
	},
	},
	plugins: [
	multiInput(),
	vue(),
	babel({
	exclude: 'node_modules/**' // only transpile our source code
	}),
	]
	}
	// File Location: src/app.js
	import Vue from 'vue/dist/vue.esm.browser';
	import hello from './hello.vue';

	Vue.component('my-hello', hello);

	new Vue({
	el: '#app',
	});
	<!-- File Location: src/hello.vue -->
	<template>
	<h1 :class="$style.h1">Hello {{ name }}</h1>
	</template>

	<script>
	export default {
	data() {
	return { name: 'John Doe' }
	}
	}
	</script>

	<style lang="scss" module>
	.h1 {
	color: red;
	}
	</style>