質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Q&A

1回答

1480閲覧

vuex-module-decorators のトランスパイルができない

yakumomutsuki

総合スコア12

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

0グッド

0クリップ

投稿2020/02/20 11:10

お世話になっております。
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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

解決しました。.babelrc というファイル名では babel-loader が反応せず、変換形式を指定できていないためそのまま吐き出される形となっていました。 babel.config.json に名前を変更すると、トランスパイルがされたため、本件は自己解決となります。

https://babeljs.io/docs/en/configuration

と思ったのですが、解決していませんでした。

投稿2020/02/21 00:58

編集2020/02/21 03:51
yakumomutsuki

総合スコア12

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問