カテゴリー
【Angular12対応】Angular12でWebpack5をサクッと使ってみよう
※ 当ページには【広告/PR】を含む場合があります。
2021/08/09
2022/08/10
Angular12が
個人的な一番の注目点はAngularで始めて
Webpack5とはいえ普通にAngularを使っている分には、
@angular-buildersAngular12で変わったこと
公式のツイッターでアナウンスされていたAngular12のアップデート項目は以下のようになっています。
🌿 レンダリングエンジンはIvyが推奨
🔐 TypeScriptでもProdモード＆strictモードがデフォルト
🧨 Webpack5をサポート
🚀 インラインSassが利用可能
💫 インラインクリティカルCSSも利用可能
この大きな仕様変更としてRenderer3の位置づけであった
Ivyそしてこのブログで取り上げる話題のWebpack5が正式サポートになりました。 これまで色々とWebpack4で縛られてきたビルド周りの環境が一気に解消されることが期待されます。
また対応するTypescriptのバージョンが4.2以降で利用可能になりました。
この他、ブラウザ方面の話題はInternetExplorer11が非推奨となり、次のAngular13でサポート終了もアナウンスされています。
ここ数年ではAngular12で色々と大きな仕様変更であるように思います。
Angularのwebpack.config.jsはどこ問題
古いAngularを使っていた方は当時から悪名高き
ng ejectすでに現在のAngular CLIからはng-ejectコマンドは廃止されているので、Angularプロジェクト内部からwebpack.config.jsを取り出して独自に実装する手法は不可になっています。
そこでカスタマイズしたwebpack.config.jsを
このようなAngular2+の「中のwebpackは極力見せたくない...」という歴史的な経緯もあり、webpackでバリバリとカスタマイズしたかったフロントエンドユーザーが、webpackと連携しやすいVueやReactへ流出する一因ではなかったのか、と今更ながら思います。
では以降で、Webpack5が簡単に試せる、Angularプロジェクトの最小構成を構築手順を説明していきます。
Angular12の動作可能な最小プロジェクトを作る
まず適当なフォルダで
npm init {
"name": "micro-angular",
"version": "0.0.1",
"private": true,
"license": "UNLICENSED"
}
で必要最低限のパッケージをインストールします。
$ yarn add webpack webpack-cli ts-loader typescript -D
$ yarn add \
@angular/core \
@angular/common \
@angular/compiler \
@angular/platform-browser-dynamic \
@angular/platform-browser \
zone.js -S
なおここでの最小構成とは
rxjswebpackビルド
プロジェクトを通してwebpackを使えるようにするためにpackage.jsonにスクリプトタグを準備します。
{
...
"scripts": {
"build": "webpack"
},
...
}
これでwebpackビルドが使えるようになりました。
ローカルにインストールしたwebpackを確認するため以下のコマンドを叩いて反応を見てみますと、
$ yarn webpack --version
webpack 5.49.0
webpack-cli 4.7.2
ということでWebpack5対応になっています。
このブログ内ではWebpack5についてじっくり解説することはできませんが、もっとも簡単な
webpack.config.js module.exports = {
entry: {
main: './src/main.ts',
},
resolve: {
extensions: [".ts", ".js"],
},
module: {
rules: [
{
test: /\.ts$/i,
use: ["ts-loader"],
},
],
}
};
またtypescriptのトランスパイルには
tsconfig.json {
"include": ["src/**/*"],
"compilerOptions": {
"experimentalDecorators": true
}
}
そして
srcmain.ts import 'zone.js/dist/zone';
import { NgModule, Component } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { BrowserModule } from "@angular/platform-browser";
@Component({
selector: "app-component",
template: "<div>最小構成!</div>",
})
export class AppComponent {
constructor() {}
}
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
bootstrap: [AppComponent]
})
export class AppModule {
constructor() {}
}
platformBrowserDynamic().bootstrapModule(AppModule);
これを使うための
index.html <!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Micro Angular12</title>
<link rel="shortcut icon" href="#" />
</head>
<body>
<app-component></app-component>
<script type="text/javascript" src="dist/main.js"></script>
</body>
</html>
必要なリソースを全て配置したら
yarn builddist/main.js起動テスト
ローカルサーバーにはwebpack-dev-serverやhttp-serverなどのユーティリティで使う必要があります。
ウェブ検索すると色々とヒットするので開発環境への導入利用手順はここでは説明しませんが、例えばhttp-serverから先程のindex.htmlを起動すると、
$ http-server -p [Webサーバーのポート番号]
というようにブラウザから動作させるのに最低限のAngularプロジェクトになっていることが分かります。
Nullish Coalescingオペレータ
おまけでAngular12から利用出来るようになった
??これまでは以下のように
nullundefined {{age !== null && age !== undefined ? age : calculateAge() }}
これからは
{{ age ?? calculateAge() }}
とすることができます。
試しに先程のmain.tsのコンポーネント部分を少し変えてみましょう。
...
@Component({
selector: "app-component",
template: `<div>{{ title ?? sayHello() }}</div>`
})
export class AppComponent {
title: string;
constructor() {}
sayHello(): string {
return 'Angular12、こんにちは!';
}
}
...
この場合再ビルドすると、title変数がヌルですので、sayHello()関数が呼び出されるようになります。
きちんと動いていることで間違いなくAngular12が動作していることが分かります。
まとめ
今回は、Webpackビルドを使って最小のAngular12プロジェクトの生成方法を考えてみました。
お遊び程度の気持ちで見ていただいた感じですが、フロントエンドでWebpackを使いこなすとAngular/Vue/ReactなどのJSフレームワークに共通したバックエンドの技術の勉強になるかと思います。
この辺の旬なフロントエンドの流行り廃りの著しい技術も、Webpackという共通のユーティリティを利用することで、柔軟に取り扱うことができます。 時間があれば一度じっくり学習してみてください。
参考サイト
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー