2
手元では表示されるエラーが異るのですが、どうやら最新のrollup-plugin-vue(v5.1.2)ではvue-runtime-helperまわり構成が変更されたためか、そのあたりのモジュール解決で問題が発生しているようです。(issue #303, issue #308)
これらは、rollup-plugin-vueのバージョンを5.1.1に落すことで一時的な対処が可能です。
yarn add rollup-plugin-vue@5.1.1
ところで、compileTemplate は現在のrollup-plugin-vueでは廃止されているオプションです。情報はすぐに古くなりやすいので公式のドキュメントも積極的に参考にしてください。
1
rollupjsのVueJSプラグインのサンプルページを見つけたのでここからコードを拝借。
これはesmを出力していることからも分かるように、他のプロジェクトから参照するコンポーネントの作成する方法で、TestComponentを使うアプリ側でさらにrollupやwebpackを使うことを想定したサンプルです。
ReferenceError: Vue is not defined
Vueがない…。
別途Vueランタイムを読み込まずにバンドルしたいといことでしたら、Vueパッケージをインストールし
yarn add vue
グローバルのVueを使わずに、Vueモジュールをインポートします。
// main.js
import TestComponent from './...
1
rollupなど、モジュールバンドラでimportした外部リソースは基本的に、明示的に外部から利用できるようにする(たとえばwindow.$=$)などしないとその外からは扱えません。(そもそもビルド時に使用していないimportは無視される気がします。)
さらに言えば、そもそもimportだけをするのではなくアプリのJSコードはバンドルするコード内に書くのが一般的ですし、そうすれば前述のように明示的に外に出す必要もありません。
1
ESモジュールを使う形で使う場合は、モジュールを使うコードもrollupで処理しますが、rollupでバンドルする場合、leafletやleaflet-geosearchのESモジュール対応がまちまちのため本質的なところ以外で若干複雑になります。
app.js
import { map, tileLayer } from 'leaflet'
import { OpenStreetMapProvider } from 'leaflet-geosearch'
export function init() {
let mymap = map('map').setView([35.68, 139.76], 13);
tileLayer('https://cyberjapandata.gsi.go....
上位に投票された、最小文字数のコミュニティ wiki 以外の回答のみが対象となります