目次
なんとも大変なwebpackとtsの設定ファイル
今回初めて、TypeScriptとVueを一緒に使ってみようと思い立ち、設定をしてみたのですが、まぁこれが大変でした。
自分自身がフロントエンド周りに疎いということもありますが、色々出てくる情報を参考にしても、versionが合ってないことが多々あり、エラーで引っかかるということが多くありました。
今回の自分の環境
node 12.0.0 npm 6.9.0 webpack 5.24.2 webpack-cli 4.5.0 typescript 4.2.2 vue 2.6.12
package.jsonの設定
まずはnpm installする際のpackage.jsonを設定します。とりあえず、最低限だけ記載しておきます。
{
"name": "",
"version": "1.0.0",
"scripts": {
"build": "webpack",
"watch": "webpack -w"
},
"browser": {
"vue": "vue/dist/vue.common.js"
},
"type": "module",
"license": "ISC",
"dependencies": {
"vue": "^2.6.12"
},
"devDependencies": {
"typescript": "^4.2.2",
"ts-loader": "^8.0.17",
"webpack": "^5.24.2",
"webpack-cli": "^4.5.0"
}
}
webpack.config.jsの設定
続いて、webpack.config.jsの中身。webpackを使用するのに必要です。
const path = require('path');
const glob = require("glob");
const dir = path.resolve(__dirname, "proj/assets/ts")
const entries = glob
.sync("**/*.ts", {
cwd: dir
})
.map(function (key) {
return [key.replace(/\.(ts|tsx)/g, ''), path.resolve(dir, key)];
});
module.exports = {
mode: "development",
entry: Object.fromEntries(entries),
output: {
filename: '[name].bundle.js',
path: `${__dirname}/proj/static/js/dist`
},
module: {
rules: [
{
test: /\.ts$/,
use: "ts-loader"
}
]
},
resolve: {
extensions: ['.js', '.vue', '.json', '.ts'],
alias: {
vue: "vue/dist/vue.common.js"
}
},
target: ["web", "es5"],
};
ポイント1. entryを各ファイル毎に分ける
entryにコンパイルしたいtsファイルへのパスを通すのですが、割と多かったのが以下のような書き方で、ファイルを一つに纏めてしまうというやり方でした。
const entries = glob.sync(path.resolve(__dirname, "proj/assets/ts/**/*.ts"));
もちろん、このやり方でも良いのですが、自分は出力ファイルを分けたかったので、上記のような設定にしたのですが、この書き方が分からずに大分ハマりました。
ポイント2. resolveのaliasにvueのパスを通す
こちら、色々な例が出ていまして、vue$: とするだとか、node_modules/vue/dist/vue.common.js とするだとか、色々あり、どれで試しても特にエラーなどが出ない為に、非常に混乱しました。。
結果として、vue: “vue/dist/vue.common.js” に落ち着きました。
tsconfig.jsonの設定
最後に、tsconfig.jsonの中身。TypeScriptをコンパイルする際のオプション。
そもそも、元々、自分はこのファイルが必要なのか分からなかったです。。最初gulpを使って、そちらにオプションを書いていたというのもあったのですが、ずっとこのファイルがなくても、コンパイルエラーにもならないし、何が問題なのか分からずで、このファイルを後から追加してみたという感じでした。
{
"compilerOptions": {
"sourceMap": true,
"target": "es5",
"module": "es2015",
"lib": [
"dom",
"es2020"
],
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true
}
}
ポイント. moduleResolutionの設定
自分の中でのポイントはmoduleResolutionにnodeを設定するということです。意外とこれが書かれている参考ページがなくて、node_modulesの中身が読めていないようでした。
以上で、とりあえずTypeScriptとVueのファイルをコンパイルすることに成功し、動かすことが出来ました！
上記のファイルに加えて、nodeのversionもかなり重要だと思います。他versionでは通らないかもしれないので、十分注意してください。
node周りはversionが合ってないと全然通らないということが結構あって、かなり大変ですね。。
自分自身でもちゃんと使っているもののversionを記していこうと思いました。