TypeScript CDN の jQuery を使いたい - かもメモ
テンプレートエンジンで直接 script を呼ぶ古代の環境の開発をしています。 前回 TypeScript を babel + webpack でトランスパイルできるようにしたのですが、なんとこのプロジェクトでは古の jQuery が使われていました！！！！ CDN から読み込まれている jQuery を使用している箇所で TypeError になってしまうので TypeScript で CDN で読み込まれている jQuery を扱えるようにしたメモ (レガシー環境過ぎて誰得なんだ…) Webpack で bundle しないための設定 Externals The externals configuration option provides a way of excluding dependencies from the output bundles. Instead, the cre
webpackでSass(SCSS)をCSSにコンパイルする最もシンプルな方法
webpackを使うと、JavaScriptをまとめることができて便利です。 しかし、webpackにはたくさんの機能があり、パッケージをインストールすることで、様々な機能が使えるようになります。 今回はwebpackを使って、Sass(SCSS)をCSSにコンパイルする方法を紹介します。 必要なパッケージのインストール ではまず、SassをCSSにコンパイルするために必要なパッケージをインストールしましょう。 以下のコマンドを実行してください。 $ npm install webpack webpack-cli css-loader sass-loader sass mini-css-extract-plugin webpack-fix-style-only-entries --save-dev とてもたくさんのパッケージをインストールする必要があります。 css-loader: CSS
Typescript環境で、ESLintとprettier入れてみた
なぜESLintとprettierを入れようと思ったか。 ・下記のtypescriptの本を読んでいた時に名前が出てきたのがきっかけ ・その後個人的に、Typescriptの勉強のため環境構築のやり方を調べていた際にも、色んなサイトで推奨されていて、ついでに入れてみようと思った ・自分の会社でもESLintとprettierはパッケージインストールされているがあまり使用したことはなかったので、余計に気になった ESLintとprettierとは？ ESlint JavaScriptのための静的検証ツール（コードを実行せずに解析を行うことができる） 構文エラーやコーディング規約を定義することができ、システム全体のコードの一貫性を維持することができる prettier 決めたルールに従い、ソースコードを適切に整形してくれるツール プロジェクトごとにルールを設定可能 実際に入れてみる バージョン
Configuration Languages | webpack
Webpack accepts configuration files written in multiple programming and data languages. The list of supported file extensions can be found in the node-interpret package. Using node-interpret, webpack can handle many different types of configuration files. TypeScriptTo write the webpack configuration in TypeScript, you would first install the necessary dependencies, i.e., TypeScript and the relevan
最新版TypeScript+webpack 5の環境構築まとめ(React, Three.jsのサンプル付き) - ICS MEDIA
TypeScriptはMicrosoftが開発するプログラミング言語です。JavaScriptのスーパーセットという位置づけで、静的型付けなど強力な言語機能を備えています。TypeScriptは高度なウェブアプリケーションの開発で使われることが多く、Google社内の標準言語として2017年に採用されるなど、注目が高まっています（参考記事『Google社内の標準言語としてTypeScriptが承認される － Publickey』）。 ▲TypeScriptの公式サイト TypeScriptはコンパイラによってJavaScriptのコードが得られますが、TypeScriptのコンパイラにはECMAScript Modules（ES Modules = importやexport文のこと）をまとめる機能が提供されていません。そのため、ES ModulesのJSファイルをまとめるモジュールバンド
Can't resolve 'fs' - megutech
browser向けjsの環境構築中、環境によって変えたい値を.envで管理したいという事でdotenv-webpackをインストールしたのだが、bundle作成時にエラーが出てつまったので共有をしておく。 環境 Package Ver webpack 4.41.0 webpack-cli 3.3.9 webpack-dev-server 3.8.1 dotenv-webpack 1.7.0 経緯 他のプロジェクトでもdotenv-webpackをブラウザ向けに使っていたこともあり、特に何も考えずにdotenv-webpackをインストールしてビルドした。 $ npm install dotenv-webpack webpack.config.js const path = require('path'); const Dotenv = require('dotenv-webpack');
webpack.configをTypeScriptで書く - Qiita
参考記事 TypeScriptでフロント書く機会もちょっとずつ増えてきている感があります。きっとWebpackでバンドル、というのが一般的なのではないでしょうか。 上記参考記事にもありますが、Webpapckの設定ファイルを書いていると、バージョン1と2の両方の書き方を混在させることができて混乱の元です。いちいちここのセクションはどんなキー名だったっけ？ 配列だっけ？ハッシュだっけ？となってドキュメントを行ったり来たりすることが多いかと思います。 このWebpackの設定ファイルもTypeScriptならコード補完やエラーがあればすぐに指摘してくれてもっと快適なんだけどなぁ、と感じたことのある人はきっと少なくないと思います。 これが実は特に面倒なことをせずともできる、というのでやってみました。 ファイル構成はこんな感じです。 . ├── dist ├── node_modules ├──
Parcel入門 - TypeScriptの導入方法 - ICS MEDIA
「TypeScript」とは、JavaScriptに「型」を指定できるオープンソースのプログラミング言語です。型によりプログラム実行前にエラーを見つけ出すことができるため、大規模なプロジェクトを安全に開発できます。Microsoft社製で、多くのフロントエンドエンジニアに採用されています。 TypeScriptのモダンなビルド環境を作るためにはwebpackやGulp.jsがよく使われていますが、設定ファイルが必要で学習コストは高めです。「TypeScriptのビルド環境がほしいだけなのに、なぜツールの設定に時間をとられるのか？」「TypeScriptを始めるときに苦労したくない」と思っている人も多いのではないでしょうか？ 「Parcelパーセル」というツールを使うと、独自の設定ファイルを使うことなくTypeScriptのモダンなビルド環境がわずか3ステップで作れます。 ▼ TypeScr
CDNから引っ張ったjqueryやlodashをtypescriptで使う - Qiita
はじめに TypeScriptは近年ますます重要視されている。またCDNを活用して自社サーバーの負荷を減らし、ページの表示速度を向上する手段としても重宝されている。 ただし、ライブラリそれぞれの特性の違い、webpackの環境の違いなどで、設定でつまずくことも多々ある。 設定の仕方 HTML まずはHTMLにタグを追加し、CDNからjQueryとLodashを引っ張ってくる。CDNは別にどこでも良いが、ここは例として、cdnjsを使う。 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.9/lodash.min.js"></scr
TypeScript + TSLint + Prettier + Webpack環境を作成したときのメモ - Qiita
babelでいう.babelrcであるところのtsconfig.jsonで、コンパイルオプションを指定できます。 使っているTypeScriptのバージョンは2.8.3ですが、以下の記事がとても参考になりました。 tsconfig.json で指定できる全 compilerOptions をまとめた (TypeScript v2.5 版) 最終的に、tsconfig.jsonは以下のように設定しました。 { "compilerOptions": { "outDir": "./public/", "module": "commonjs", "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noImplicitReturns": true, "allowUnreachableCode": false, "a
最新版で学ぶwebpack 4入門 - BabelでES2017環境の構築(React, Three.js, jQueryのサンプル付き) - ICS MEDIA
最新版で学ぶwebpack 5入門 Babel 7でES2023環境の構築 (React, Vue, Three.js, jQueryのサンプル付き) ECMAScript 2015(略：ES2015)以上の言語仕様でJavaScriptを書くことが、昨今のウェブのフロントエンドエンジニアの基本テクニックです。しかし、ECMAScript 2015以上の仕様のJavaScriptで記述すると、Internet Explorer 11など古いブラウザでは動作しないこともあります。そこでBabelなどのトランスパイラと呼ばれるツールを使って、ES2015〜ES2023の仕様で記述したJavaScriptファイルを互換性のあるECMAScript 5に変換します。 トランスパイラとして一番有名なのが「Babel」というツールです。ただ、BabelにはECMAScript Modules（impo
webpack -> FuseBox 移行メモ - Qiita
webpackを使っていたプロジェクトをFuseBoxに移行してみました。 バンドル時間が超速くなり、バンドルファイルサイズが超小さくなりました。 webpack FuseBox package.json package.jsonの比較です。 "devDependencies": { "babel-cli": "^6.26.0", "babel-core": "^6.23.1", "babel-eslint": "^8.0.0", "babel-loader": "^7.1.2", "babel-preset-es2015": "^6.22.0", "babel-preset-flow": "^6.23.0", "babel-preset-react": "^6.23.0", "css-loader": "^0.28.7", "eslint": "^4.6.1", "eslint-load
Backbone.MarionetteアプリをWebpackでバンドルする - Qiita
今まで、Browserlifyを利用していましたが、Webpackに切り替えました。Webpackの方が使い方も簡単で、これからモジュールバンドルを利用される方は、Webpackを使う方がいいのではないでしょうか。 なんでもjsへ変換してくれます。 バンドルサンプル バンドルの例として以下のようなモジュールを利用するWebアプリのバンドル方法を示します。全体はGithubに置いてあります。 https://github.com/notice/backbone-marionette backbone backbone.marionette jade lodash jquery 最近では、少し古く感じてしまうBackboneですが、Marionetteの方はv3（現時点最新はv2.4）へ向けて開発が進められています。 v3ではMarionetteのモジュールは廃止されるようです。Marione
webpack 4 入門 - Qiita
お知らせ（2020/08/25 追記） Udemy で「webpack 最速入門（10,800 円 -> 2,000 円）という講座を公開しました。 本来の価格は10,800円ですが、上記リンクからアクセスすると2,400円で購入できます。 どんな内容？ webpack を利用したフロントエンド開発環境が構築できるようになる、ハンズオン形式の講座です。 詳細は上記のリンクのプレビュー動画で詳しく説明しています。 記事との内容の違い 記事の内容に、以下の内容や特徴が追加された感じです。 実務で利用できる開発環境を徐々に構築していくので、記事と比べて実践的な内容 ハンズオン形式の講座なので、手を動かしながら webpack を学習できる webpack の設定ファイルに追加する値の詳細をすべて解説 記事では解説していない細かい補足や、機能のご紹介 なぜ npm scripts を利用するのか
webdesign-dackel.com - このウェブサイトは販売用です！ - webdesign dackel リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
webpackとかKarmaとかの設定ファイルをTypeScriptでかく - Qiita
構成 こんな感じの環境を作っています。 TypeScript webpack Jasmine Karma あと karma-coverage とかものせてます。 設定ファイルもTSで書きたい 設定ファイルだけJavaScriptで書くのもなんとなく癪なので、TypeScriptで型チェックしていきます。 webpack.config.ts 公式で、ちゃんとできるよ！っていうガイドを用意してくれています。 Qiitaの記事を書いてる方もいました。 ということで割愛します。実際に行った作業は以下の３つです。 ts-nodeのインストール ＠types/webpackのインストール webpack.config.tsの作成 karma.conf.ts こちらも公式で触れられています。 https://karma-runner.github.io/1.0/config/configuration-
フロントエンド知らない私のwebpack入門 その1 - Qiita
jQuery 1.7 あたりで知識が止まっている、最近のフロントエンド開発を知らない私が入門しています、という記事です。 なんか長くなったし、気力も持たないので、その1ということで書いています。 webpackってなあに？ npm経由で入るアセットバンドラー (asset bundler)です。Webフロントエンド開発用のビルドツールです。 SPAなどを作る時、 HTML・JS・CSS・画像やウェブフォントなど一連のリソースをまとめてくっつけたり、 くっつけられるように加工したり、 JSをbabelで古いブラウザ向けに変換したり、 TypeScriptやらをJSに変換したり、 全部面倒見てくれます。 ただwebpackに上記の機能を全て内蔵しているわけもなく、プラグインやローダーとかいった追加の機能をプロジェクトにインストールして設定することにより利用できるようになります。 最近のフロント
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.typescriptlang.org/docs/handbook/react-&-webpack.html