1年前に作ったフロントエンド環境を色々新しくした - Qiita
新規立ち上げのチームを異動して、1年前に作った会社のフロントエンド環境（Vue.js + webpack(+Gulp)）をベースに環境を作っていたのですが、 色々古かったので、新しくしました 今回作ったものはGitHubにあげてます https://github.com/kurosame/vuejs-boilerplate この中からやったことをいくつかピックアップして紹介したいと思います パッケージを最新にする npm install -g npm-check-updates npm-check-updates -u // package.jsonのパッケージを全て最新にして上書く npm update // package.jsonに記載してあるバージョンに更新する npm install 今回みたいにバージョンアップするパッケージが多い場合は、これでいいと思う 他のパッケージに依存し
GitHub - PatrickJS/PatrickJS-starter: MFE Starter
An Angular starter kit featuring Angular 6, Ahead of Time Compile, Router, Forms, Http, Services, Tests, E2E), Karma, Protractor, Jasmine, Istanbul, TypeScript, @types, TsLint, Codelyzer, Hot Module Replacement, and Webpack. If you're looking for Angular 1.x please use NG6-starter If you're looking to learn about Webpack and ES6 Build Tools check out ES6-build-tools If you're looking to learn Type
webpack.configをTypeScriptで書く - Qiita
参考記事 TypeScriptでフロント書く機会もちょっとずつ増えてきている感があります。きっとWebpackでバンドル、というのが一般的なのではないでしょうか。 上記参考記事にもありますが、Webpapckの設定ファイルを書いていると、バージョン1と2の両方の書き方を混在させることができて混乱の元です。いちいちここのセクションはどんなキー名だったっけ？ 配列だっけ？ハッシュだっけ？となってドキュメントを行ったり来たりすることが多いかと思います。 このWebpackの設定ファイルもTypeScriptならコード補完やエラーがあればすぐに指摘してくれてもっと快適なんだけどなぁ、と感じたことのある人はきっと少なくないと思います。 これが実は特に面倒なことをせずともできる、というのでやってみました。 ファイル構成はこんな感じです。 . ├── dist ├── node_modules ├──
Angular 2 AoT Compilation with webpack
@ngtools/webpack package provides a very easy way to switch compilations of an Angular application from JiT to AoT. It’s used in Angular-CLI. The tool allows us enable AoT compilation without any changes of the application code. Let’s use new great stuff! Make base appAt first, make a very simple application. ├── index.html├── package.json├── src│ ├── app│ │ ├── app.component.css│ │ ├── app.compon
KarmaとJasmineとWebpackでJavaScript(TypeScript)でユニットテストを実行してレポートやカバレッジを出力する - Qiita
KarmaとJasmineとWebpackでJavaScript(TypeScript)でユニットテストを実行してレポートやカバレッジを出力するJavaScriptjasmineTypeScriptkarmawebpack TypeScript Advent Calendar 2016 の 最終日 の記事を書かせて頂きました。 はじめに Javascript のユニットテストを初めてやります。 その上で調査したことを書きます。 ゴール TypeScript + Webpack + Karma + Jasmine 出力: テストレポート＆カバレッジレポート 作業ステップ Jasmine 導入 Karma 導入(Karma + Jasmine) Webpack導入(Karma + Webpack) TypeScriptの導入(TypeScript + Webpack + Karma) 前提 n
Angular - What is the meanings of module.id in component?
In an Angular app, I have seen that @Component has property moduleId. What does it mean? And when module.id is not defined anywhere, the app still works. How can it still work? @Component({ moduleId: module.id, selector: 'ng-app', templateUrl: 'app.component.html', styleUrls: ['app.component.css'], directives: [AppComponent] });
webpackのrequire.ensureでDynamic Loadingをして大規模アプリケーションを作る - Qiita
大規模アプリケーションを運営するときに、最初にすべてconcatしたファイルをいっぺんに読み込むと膨大なコード量が読み込まれてしまうので、各ルーティングごとに分けて必要のあるときにだけJSを読み込みたいケースがあります。 従来はRequireJSを使えば解決できる話だけど、最近ではwebpackやbrowserifyを使うケースのほうが増えてきたきて併用なんて絶対したくないと思います。なのでwebpackを使った大規模サイト運営におけるDynamic Loading方法をここに書き置いておきます。（知ってる方にはしょうもない話ですが間違ってたら注意してもらえれば助かります。） require.ensureでjsファイルを後から読み込む
Managing jQuery plugin dependency in webpack
I'm using Webpack in my application, in which I create two entry points - bundle.js for all my JavaScript files/codes, and vendors.js for all libraries like jQuery and React. What do I do in order to use plugins which have jQuery as their dependencies and I want to have them also in vendors.js? What if those plugins have multiple dependencies? Currently I'm trying to use this jQuery plugin here -
【webpack】CommonJS に対応していない JS を exports-loader で華麗に対応する - 2noの日記
スライドメニューの実装に sp-slidemenu を fixed 対応した以下のライブラリを使用した。 github.com このライブラリは npm にも bower にも登録されていない。 bower.json があれば bower install も可能だろうが、無いので npm で github のパスを指定してインストールする。 ※ git submodule はオペレーションの関係で今回使えない。 $ npm install --save-dev git://github.com/tokunagakazuya/sp-slidemenu#0.1.2-release ▼ インストールが成功すると、node_modules 直下に sp-slidemenu.js ディレクトリが出来る。 node_modules/sp-slidemenu.js/ ├─Gruntfile.js ├──
Reactを「webpack + babel-loader」でビルドする方法
自分はReactのビルドにBrowserifyを主に使用しており、昨年には『Reactをnpmでビルドする方法 browserify (watchify) + babelify編』という記事も書きました。ただ、ここ最近のwebpackの人気っぷりはすさまじいものがあり、「React + webpack」という組み合わせが今後のスタンダードになってもおかしくないという状況なので、今回はwebpackでReactをビルドする方法をまとめてみました。 webpackとは webpackは、browserifyと同様、複数のファイルの依存関係を顧慮してビルドを行うツールです。Browserifyとの大きな違いは、対象となるのがJSファイルだけでなく、CSSファイルや画像などに及ぶというところでしょうか。また最終的に生成するファイルも複数にわけることもできたりします。プラグインがすでに含まれていたり
webpack を使ったシンプルなウェブページ開発の準備手順 - ラボラジアン プログラミング情報
webpack を使って、なるべく簡単且つそれなりにちゃんとしたウェブページを作りたい場合の準備作業手順を紹介します。 1ページしかないウェブページで、JavaScript を使って何か簡単な処理を実行する場合などを想定しています。React とか AngularJS とかは使いません。 方針 使用するツール webpack JavaScript, CSSのモジュールバンドラー。 Babel ES2015の文法を使えるようにする。 webpack経由で使用する。 Bootstrap CSSフレームワーク webpack を使って生成する app.css 内に Bootstrapのコードを統合する。JavaScriptも同様。 CDNを使ってグローバルに取り込むと jQueryもグローバルで導入しないといけなくなるのでそれはやめた。 Sass webpack経由でコンパイルできるようにする。
【メモ】webpack.optimize.UglifyJsPluginでbuildしてもコメントが残っちゃうんだよねってとき - メンチカツ
Reactアプリでリリースってなったとき、みんなやりたいのがjsファイルのminify。 webpackのドキュメント list of plugins に習い、webpack.config.jsで plugins: [ new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) ] を追加するも、ビルドしたソースにはコメントやスペースがもりもり残ってる。。😇 そんなときはjsのloaderにoptionを追加。 module: { loaders: [ { test: /\.js$/, loader: 'babel', query: { comments: false, compact: true }, exclude: /node_modules/, include: __dirname } ] } ba
webpack上でglobを使う - コンパイラかく語りき
webpack上でglobを使う方法について、業務で触れることがあったのでメモ。 インストール なにはともあれインストール。 $ npm init -y $ npm install webpack glob ディレクトリ構造 ディレクトリを以下のように作りました。 src/にJSファイルが格納されています。 src/common, src/pc, src/sp, それぞれにentry.jsがあり、これがバンドル対象です。 中身はこんな感じです。a.js, b.jsがモジュールになってる感じですね。 gist61f0bb07397dcedd79d8 dist/がバンドルファイルの格納先となります。 webpack.config.js webpackとはつまりconfigを書くことと見たり。 configは以下のようになりました。 gista469bd28b425bdf4d054 glob.s
webpackを使い倒す - Thujikun blog
本エントリーJavaScript Advent Calendar 2014 7日目の記事になります。 webpackとは 概要については最近いろんな方が書いてるいるのでそちらを参考にしていただければつかめるかと。 全部のせRequireJSっぽいWebpackを使ってみた。 RequireJS等はもう古い。WebPackとは？ ようはナウいフロントエンドの依存解決ツールですね。 っていうネタで書こうと思っていたら、昨日yutaponさんが既に書いていたりするので（gulp.jsを使ってフロントエンドのビルドをする【webpack, stylus】）、いいところはパクリ参考にしつつ、もうちょっとwebpackに突っ込んだ内容を書いてみようと思います。 Options entryとoutput 簡単に試すときはentryは1ファイルだけ指定できればよいですが、実際にプロジェクトで使うとなると複
【意訳】Webpackの混乱ポイント - Qiita
この記事はWebpack — The Confusing Partsを、筆者の許諾を得て意訳しています。 何か誤りがありましたら、ご指摘いただけると幸いです。 (以下、訳) ReactとReduxで作られたアプリケーションにとって、Webpackは最先端を行くモジュールバンドラです。Angluar2やその他のフレームワークを使っている人々は、たいへんWebpackのお世話になっていることでしょう。 私が初めてWebpackの設定ファイルを見た時、それはさながら宇宙人のようで非常にわかりづらく見えました。しばらく試しているうちに、今では次のように考えるようになりました。Webpackは単に独特のシンタックスと新しい哲学を持っており、それがとっつきにくさの原因になっているのだと。偶発的とはいえ、これらの哲学は、Webpackの人気を押し上げた原因の１つでもあります。 Webpackのとっつきに
Webpack + React + ES6の最小構成を考えてみる。 - 文系プログラマー
Webpack + React + ES6 Webpack + React + ES6の最小構成を考えてみる。 この記事は明石家サンタを見ながら書かれました。 (注: 2016/9/25 内容を大幅に改定、WebpackやReactの最新版に対応) 関連した過去記事 Webpack入門編 uraway.hatenablog.com Gulp + Browserifyを用いた環境ビルド uraway.hatenablog.com React Tutorial uraway.hatenablog.com プロジェクトセットアップ $ npm init インストール webpackとreactをまずはインストール。 dev serverのグローバルインストールにはsudoコマンドが必要かも。 $ npm install --save react react-dom $ npm install -
webpack.config.jsの読み方、書き方 - dackdive's blog
（2017/08/28追記） この記事は webpack v1 系での config について書かれています。 v2 系以降は一部の項目名などに変更があります。 Migrating from v1 to v2 を読んで v2 系への移行を行うか、または私のリポジトリを参考にしてください。 https://github.com/zaki-yama/react-redux-template https://github.com/zaki-yama/redux-express-template （追記ここまで） はじめに webpack を使った JS/CSS のビルドを行う場合、webpack.config.js という設定ファイルを用意してコマンド自体は webpack で済ませることがほとんどだと思いますが 公式チュートリアルでも webpack.config.js については少ししか触れ
webpackでTypeScriptからコンパイルしたJavaScriptの関数をうまく呼び出せない。 - Qiita
webpackでTypeScriptからコンパイルしたJavaScriptの関数をうまく呼び出せない。JavaScriptwebpack
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Karma + webpack + TypeScript 2017/2 - Qiita
https://qiita.com/nosoosso/items/a9ef0b26ccff47133870