お世話になっております。
vue-cliを使うのではなく、素のwebpackから Vue + Vuex + TypeScript で書いているのですが、es6 環境ではなく es5 向け、つまりIEでも閲覧できるようにファイルをビルドしたいと思っております。
Vuex の型定義については vuex-module-decorators を用いているのですが、ライブラリ製作者によると es5 向けに行う場合には、トランスパイルが必要な模様です。vue-cliは使っていないので、 transpileDependencies をオプションに含むことができないため、以下のような設定にして実行しました。
しかしトランスパイルがうまくいきません。
packages.json
{ "name": "users", "version": "1.0.0", "description": "", "main": "index.ts", "scripts": { "dev": "webpack-dev-server --hot --inline --config webpack.dev.js", "build": "webpack --progress --hide-modules --config webpack.prod.js", "lint": "eslint --ext .js,.vue src --fix", "test": "jest" }, "keywords": [ "vue", "vuex", "typescript" ], "author": "yakumomutsuki@gmail.com", "license": "ISC", "dependencies": { "axios": "^0.19.0", "bootstrap": "^4.3.1", "bootstrap-vue": "^2.1.0", "vue": "^2.6.10", "vue-class-component": "^7.1.0", "vue-property-decorator": "^8.3.0", "vue-router": "^3.1.3", "vuex": "^3.1.2", "vuex-class": "^0.3.2" }, "devDependencies": { "@babel/core": "^7.8.4", "@babel/plugin-proposal-decorators": "^7.8.3", "@babel/polyfill": "^7.8.3", "@babel/preset-env": "^7.8.4", "@types/jest": "^24.0.23", "@types/node": "^13.1.4", "@typescript-eslint/eslint-plugin": "^2.8.0", "@typescript-eslint/parser": "^2.8.0", "@vue/test-utils": "^1.0.0-beta.30", "babel-core": "^7.0.0-bridge.0", "babel-jest": "^24.9.0", "babel-loader": "^8.0.6", "cross-env": "^6.0.3", "css-loader": "^3.2.0", "eslint": "^6.7.1", "eslint-config-prettier": "^6.7.0", "eslint-loader": "^3.0.2", "eslint-plugin-prettier": "^3.1.1", "eslint-plugin-vue": "^6.0.1", "file-loader": "^5.0.2", "jest": "^24.9.0", "jest-serializer-vue": "^2.0.2", "node-sass": "^4.13.0", "prettier": "^1.19.1", "prettier-webpack-plugin": "^1.2.0", "sass-loader": "^8.0.0", "style-loader": "^1.0.0", "ts-jest": "^24.2.0", "ts-loader": "^6.2.1", "typescript": "^3.7.2", "vue-jest": "^3.0.5", "vue-loader": "^15.7.2", "vue-style-loader": "^4.1.2", "vue-template-compiler": "^2.6.10", "vuex-module-decorators": "^0.11.0", "webpack": "^4.41.2", "webpack-cli": "^3.3.10", "webpack-dev-server": "^3.9.0", "webpack-merge": "^4.2.2" }, "prettier": { "tabWidth": 4, "printWidth": 120, "singleQuote": true, "bracketSpacing": true, "semi": false }, "private": true }
webpack.common.js
- webpack-merge で本番用と開発用を切り分けています、こちらは共通設定
const { VueLoaderPlugin } = require('vue-loader') const PrettierPlugin = require('prettier-webpack-plugin') const path = require('path') module.exports = { entry: { main: ['@babel/polyfill', './vue/entry/index.ts'], }, output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: '[name].bundle.js' }, module: { rules: [ { enforce: "pre", test: /.(ts|js|vue)$/, loader: "eslint-loader", exclude: /node_modules/ }, { // node_modules の vuex-module-decorators のみトランスパイルするよう設定 test: /node_modules/(vuex-module-decorators)/.+.js$/, loader : "babel-loader" }, { test: /.ts$/, loader: 'ts-loader', exclude: /node_modules/, options: { appendTsSuffixTo: [/.vue$/], } }, { test: /.vue$/, loader: 'vue-loader', options: { loaders : { scss: 'vue-style-loader!css-loader!sass-loader' } } }, { test: /.scss$/, use: [ { loader: 'style-loader', }, { loader: 'css-loader', }, { loader: 'sass-loader', }, ] }, { test: /.(png|jpg|gif|svg)$/, loader: "file-loader", options: { name: "[path][name].[ext]", } }, ] }, resolve: { extensions: [".ts", ".js"], alias: { '@': path.resolve(__dirname, 'vue'), '@atoms': path.resolve(__dirname, 'vue/src/components/atoms'), '@molecules': path.resolve(__dirname, 'vue/src/components/molecules'), '@organisms': path.resolve(__dirname, 'vue/src/components/organisms'), '@views': path.resolve(__dirname, 'vue/src/views'), }, mainFields : ['browser', 'main', 'module'] }, plugins: [ new VueLoaderPlugin(), new PrettierPlugin() ] };
.babelrc
{ "presets": [ [ "@babel/preset-env", { "useBuiltIns": "entry" } ] ], "plugins": ["@babel/plugin-proposal-decorators"] }
参考情報をいろいろと手探りで試してみたものの、ビルドされたファイルを確認すると constructor といったキーワードが出力され、vuex-module-decorators は取り込まれていそうなのですが、トランスパイルには失敗している状態です。
どうかよろしくお願いいたします。
◆参考
公式
https://github.com/championswimmer/vuex-module-decorators#configuration
以下はlaravelMixでトランスパイルする手順
https://stackoverflow.com/questions/53344641/laravel-mix-transpile-dependency
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。