vue-cli を利用して作った環境を webpack4 と Typescript で動くようにしてから Vue.js の勉強をしてみようと思い立ってから 2時間くらい Vue.js と関係ないとこで費やして疲れたメモです。
Versions
webpack: 4.5.0
typescript: 2.8.1
vue-cli: 2.9.3
vue-cli を使って環境を構築する
vue init webpack myapp
cd myapp
色々聞かれますが推奨を選びました。
確認のため移動して動かしてみます。
npm run dev
localhost:8080 でサーバが立ち上がり、確認できました。
正常な状態が確認できたので停止して Typescript の環境を用意します。
Typescriptのインストール
npm i -D typescript ts-loader vue-class-component vue-property-decorator
ローダーと型定義ファイルも合わせて入れます。
./node_modules/typescript/bin/tsc --init
tsconfig.json を作り、公式サイトの設定をもとに少し手を加えて以下のようにしました。
{
"compilerOptions": {
// これは Vue のブラウザサポートに合わせます
"target": "es5",
"module": "es2015",
// これは `this` におけるデータプロパティに対して厳密な推論を可能にします
"strict": true,
// this を型推論するため有効にする
"noImplicitThis": true,
"moduleResolution": "node",
// import Vue from 'vue' を有効にする
"allowSyntheticDefaultImports": true,
// import/export を使うため有効にする
"esModuleInterop": true,
// デコレーターを有効にする
"experimentalDecorators": true
}
}
コメント入れたら読みにくいですね。
.vueファイルを import できるようにする
Typescriptで*.vueファイルを読めるようにするため型定義ファイルを設置します。
index.d.ts としました。
declare module '*.vue' {
import Vue from 'vue'
export default Vue
}
公式の型定義ファイル
webpack4で動くようにする
CLIで構築時にインストールされたwebpack@3からwebpack@4に（その他の webpack のモジュール含めて）上げておきます。 webpack-cli がいるので入れます。
npm i -D webpack-cli
webpack4にした際に次のモジュールを更新する必要がありました。
最初は、extract-text-webpack-plugin@nextに更新しましたが、公式ドキュメントにあるmini-css-extract-pluginに変更しました。
- extract-text-webpack-plugin
- html-webpack-plugin
- webpack-dev-server
vue用のモジュールと一緒にnpm outdatedで確認して適宜最新のものに入れ直しました。
npm outdated
npm i -D extract-text-webpack-plugin@next
.
.
.
./build/webpack.base.conf.jsを編集
entryのmain.jsを.tsに拡張子を変えます。
entry: {
app: './src/main.ts'
}
.tsを追加します。
resolve: {
extensions: ['.js', '.ts', '.vue', '.json']
}
vue init時にeslintを入れた状態だったので、module.rulesからeslint-loaderを外してts-loaderを追加します。
module: {
rules: [
// ...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.ts$/,
loader: 'ts-loader',
exclude: '/node_modules/',
options: {
appendTsSuffixTo: [/\.vue$/]
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
あとでtslintを使う予定。
./build/webpack.dev.conf.jsを編集
modeを追加します。
const devWebpackConfig = merge(baseWebpackConfig, {
mode: 'development',
./build/webpack.prod.conf.jsを編集
modeを追加する
const webpackConfig = merge(baseWebpackConfig, {
mode: 'production',
optimization.splitChunksを設定する
設定ファイルを編集せずに npm run build したら以下のエラーが出ました。
Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.
webpack4から optimize.CommonsChunkPlugin が削除されたので、
optimization.splitChunks を使えということのようです。
plugins に書かれている new webpack.optimize.CommonsChunkPlugin({... をコメントアウトしてoptimization.splitChunksを設定します。
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
optimization: {
splitChunks: {
cacheGroups: {
default: false,
vendor: {
minChunks: 2
},
manifest: {
minChunks: 2
},
app: {
minChunks: 3
},
commons: {
test: /[\\/]node_modules[\\/]/,
name: "vendor",
chunks: "all"
}
}
}
},
チューニングはおいおいやることにしてひとまず設定。
webpack公式ドキュメントにあるsplitChunksを読んで適切に設定してください.
ExtractTextPluginを編集
build時にExtractTextPluginで怒られたのでhashType(md5)を追加して [md5:contenthash].css としました。
plugins: [
// extract css into its own file
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[md5:contenthash].css'),
MiniCssExtractPluginに変更するほうが良いようです。
あとはvuejs公式の基本的な使い方にあるように vue を import して書き換えます。
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
name: 'App'
})
</script>
上記のように *.vue ファイルを書き換えたら *.js ファイルを *.ts に書き換えます。
これでひとまず動くはずですが、webpack3からwebpack4へのマイグレーションを適宜してください。
npm run dev
dev/build共に無事に動いたらあとはTypescriptでVueに入門するだけです。あー長かった。