「.vue」ファイルを作成してコンポーネントを扱う際に、「.vue」ファイルをトランスパイルするための設定がないとWebpackでエラーになってしまうので、以下の設定をした。 Vueのインストール
社内のフロントエンド、マークアップエンジニア向けに話をしそうなので、そのメモ。 なんとなくで読んでください。 Index 「Webサイト用」モダン開発環境 パフォーマンス施策 Webサイト制作において必要な条件 モダンな技術を採用しつつ、今までの案件で使える SPAではなくWebサイトに対応 HTMLファイルが各ページで存在している head内の情報が直接書かれている きれいなHTML minifyされていない Nuxt.jsのgenerateみたいに、最適化されすぎていない 変えたいもの 脱Gulp Gulp -> npm scripts(タスクランナー) Gulp -> webpack(バンドラー、トランスパイラー) jQuery -> Vue.js & Vanilla.js ES2015+ -> TypeScript(Classベース) EJS -> Pug 脱Gulp(Gulpをや
はじめに 前回、elm0.19の開発環境を構築したので、 elmを試すために、Elm 0.18で作るTodoアプリ(1)を試してみる。 ElmをSPAではなく一部適用にしたいので調整する。 開発環境 Windows 10 Vagrant 2.1.5 Virtualbox 5.2.18 Ubuntu 18.04 LTS (Bionic Beaver) Docker version 18.06.0-ce, build 0ffa825 docker-compose version 1.22.0, build f46880fe ファイル構成イメージ 以下のようなファイル構成としたい。 - src - card.js # elmを読み込むためのjsファイル - html - card.html # jsファイルを読み込むhtmlファイル - Card - Main.elm # 大元のプログラム -
本投稿のサンプルコードを GitHub に用意しました。 im36-123/critical_css | GitHub 概要 前回は、 Critical CSS のインライン化までのプロセスを手順を追って説明しました。 詳しくは下記を御覧ください。 Above the fold(ファーストビュー)に含まれる CSS をインライン化してパフォーマンスの改善を図る Critical CSS を開発者が手動で抽出しインライン化するのは現実的ではありません。 そこで、今回は webpack, と HTML Critical Webpack Plugin を使ってインライン化してみたいと思います。 環境構築 HTML Critical Webpack Plugin が動作する環境を構築します。 今回作る環境は下記に用意してあります。 im36-123/critical_css | GitHub とこ
概要 Elm0.18を使っていたが、作成されるソースが大きいと思っていたところ、elm0.19を勧めていただいたので勉強することにした。 手始めに、elm-webpack-starter : Elm 0.19 with Webpack 4, Hot Reloading & Babel 7のリポジトリをdockerで試せる環境を作成した。 2019/1/9 追記 webpack-serveが非推奨になり、webpack-dev-serverが再び推奨になったため、 webpack.config.jsを修正した記事を以下に追加した。 elm0.19 + webpack4 + webpack-dev-server のサンプルをdockerで試したメモ 開発環境 Windows 10 Vagrant 2.1.5 Virtualbox 5.2.18 Ubuntu 18.04 LTS (Bionic
Vuesax Vuesax は、vuejsに基づいたコンポーネントのフレームワークであり、段階的に採用できるようにゼロから設計されたフレームワークです。 フレームワークは、アプリケーションの開発を容易にし、必要な機能を削除せずにアプリケーションの設計を改善することに重点を置いています。私たちはすべてのコンポーネントが色、形、デザインで独立していて、すべてのフロントエンドが好きですが、作成や制作のスピードを損なうことがないようにします。 インストール このインストレーションチュートリアルでは、vuesaxの使用方法について説明します。 webpack Vue CLI 3 NPM Node.js CDNによってプロジェクトにvuesaxを実装しようとしている場合は、vuejsの後にスクリプトのインポートを置くだけで説明することはあまりありません プロジェクトを作成する まず、偉大なプロジェクト
背景Kintoneのカスタマイズを始めたのですが、開発を進めるにあたって「1つのアプリに対して、JSファイルやCSSファイルをどんどんアップロードしていく仕組みだと開発スピードが落ちる」ということを強く感じました。その理由としては、以下の通りです。 使いたいライブラリが出て来るたびにいちいちアップロードするのが面倒 JSファイルの構成を変えたときもアップロードし直さないといけない 複数開発者が1つのアプリに対して作業するときにコンフリクトしやすい なお、webpack + Babelの導入だけであればKintone devcamp 2017のセッションのスライドがステップバイステップで説明してあり、かなりわかりやすいです。 Webpackを導入するぞ!上記の問題を受けて、現代のフロントエンド開発では欠かせないWebpackを導入することにしました。 Webpackとは、複数ファイル(Jav
出来上がったもの(2018年9月) ソースコード この記事は半起半眠みたいな状態で書いたので、文章が壊滅している可能性がありますがご了承ください。 dependencies yarn add -D parcel-bundler babel-core babel-preset-env css-mqpacker eslint eslint-config-precure husky lint-staged node-sass node-sass-package-importer parcel-bundler parcel-plugin-imagemin parcel-plugin-inlinesvg postcss postcss-short postcss-sorting pug stylelint stylelint-config-recommended-scss stylelint-scs
tipThis guide stems from the Getting Started guide. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. In this guide we will learn how to integrate TypeScript with webpack. Basic SetupFirst install the TypeScript compiler and loader by running: npm install --save-dev typescript ts-loaderNow we'll modify the directory structure & the configuration files: project webpack
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く