· 2分で読了
アポロブーストを使用した Svelte でロールアップエラーが発生しました
# フロントエンド この記事は中国語から自動翻訳されたものです。翻訳によりニュアンスが失われている場合があります。
元々は svelte と graphQL を組み合わせて、どんな感じか試してみようと思っていましたが、apollo が提供する Observable Query は Reactive なシーンに非常に簡単に組み合わせることができます。
svelte に ApolloClient をインポートしました。
import ApolloClient from 'apollo-boost';
しかし、すべてをインストールした後、rollup のコンパイルが通らないことに気付きました:
[!] Error: 'import' and 'export' may only appear at the top level
node_modules/symbol-observable/es/index.js (2:0)
1: /* global window */
2: import ponyfill from './ponyfill.js';
^
3:
4: var root;
Error: 'import' and 'export' may only appear at the top level
at error (/Users/kalan/code/github-tool/node_modules/rollup/dist/shared/node-entry.js:5400:30)
at Module.error (/Users/kalan/code/github-tool/node_modules/rollup/dist/shared/node-entry.js:9824:16)
at tryParse (/Users/kalan/code/github-tool/node_modules/rollup/dist/shared/node-entry.js:9717:23)
at Module.setSource (/Users/kalan/code/github-tool/node_modules/rollup/dist/shared/node-entry.js:10080:33)
at Promise.resolve.catch.then.then.then (/Users/kalan/code/github-tool/node_modules/rollup/dist/shared/node-entry.js:12366:20)
issueを調べてみると、他の場所でも似たような問題があることがわかりました。現在は他のアイデアを先に完成させたいので、解決策を探すのは面倒になり、結局は React に戻ることにしました。後で見直すために、まずはメモを残しておきます。
関連記事
- CSS field-sizing — 1行のCSSでフォーム要素を自動リサイズさせるtextarea の自動高さ調整は、以前は scrollHeight を監視する JavaScript が必要だった。CSS field-sizing: content なら1行で済む。textarea・input・select に対応。
- 超リンクの下線をもっときれいに見せる:text-underline-offsetデフォルトでは下線が文字にかなり近く、こういう見た目を好まないデザイナーもいる。僕自身も、あまりきれいだとは思っていない。
- なぜウェブは Pixel Perfect を追求すべきではないのかPixel Perfect が本当に重要なときだけそれを気にすべきであり、そうでなければ往々にして双方にとって損な結果になる。
- CSS の HSL で色を書こう!(そしてより良い方法)Web開発において、従来の HEX や RGB の色表現は広く使われているものの、読みやすさや直感性に欠ける問題があり、P3 のような広色域では表現力にも限界がある。HSL(色相、彩度、明度)は、より直感的に色を定義できる方法であり、開発者が色を理解し調整しやすくしてくれる。HSL は色相・彩度・明度の3つの軸で色を表すため、特にデザインシステムにおいて、カラーパレットの明度変化をより自然に扱える。