@@ -28,93 +28,7 @@ npm install --save vue-facing-decorator
28
28
29
29
### JavaScript プロジェクト
30
30
31
- #### Vite
32
-
33
- 1 . 必要な依存パッケージをインストールしてください。
34
-
35
- ``` shell
36
- npm install @haixing_hu/vue3-class-component
37
- npm install @babel/core @babel/runtime @babel/preset-env
38
- npm install @babel/plugin-proposal-decorators @babel/plugin-transform-class-properties @babel/plugin-transform-runtime
39
- ```
40
-
41
- 2. [@babel/plugin-transform-class-properties]および、[@babel/plugin-proposal-decorators]プラグインを使用して、[Babel] を設定してください。[Babel]の設定ファイル名は` babelrc.json` であることが多く、以下のような内容です。
42
-
43
- ` ` ` json
44
- {
45
- " presets" : [[" @babel/preset-env" , { " modules" : false }]],
46
- " plugins" : [
47
- " @babel/plugin-transform-runtime" ,
48
- [" @babel/plugin-proposal-decorators" , { " version" : " 2023-05" }],
49
- " @babel/plugin-transform-class-properties"
50
- ]
51
- }
52
- ` ` `
53
-
54
- ** Note:** [vite]が含まれている場合, 必ず` @babel/preset-env` の` modules` パラメーターを` false` に設定してください。
55
-
56
- 3. [Babel]を利用するため、` vite.config.js` で[vite]を設定してください。設定ファイル名は ` vite.config.js` であることが多く、以下のような内容です。
57
-
58
- ` ` ` js
59
- import { fileURLToPath, URL } from ' node:url' ;
60
- import { defineConfig } from ' vite' ;
61
- import vue from ' @vitejs/plugin-vue' ;
62
- import * as babel from ' @babel/core' ;
63
-
64
- // A very simple Vite plugin support babel transpilation
65
- const babelPlugin = {
66
- name: ' plugin-babel' ,
67
- transform: (src, id) => {
68
- if (/\. (jsx? | vue)$/.test(id)) {
69
- // the pattern of the file to handle
70
- return babel.transform(src, {
71
- filename: id,
72
- babelrc: true,
73
- });
74
- }
75
- },
76
- };
77
-
78
- // https://vitejs.dev/config/
79
- export default defineConfig({
80
- plugins: [
81
- vue({
82
- script: {
83
- babelParserPlugins: [' decorators' ], // must enable decorators support
84
- },
85
- }),
86
- babelPlugin, // must be after the vue plugin
87
- ],
88
- resolve: {
89
- alias: {
90
- ' @' : fileURLToPath(new URL(' ./src' , import.meta.url)),
91
- },
92
- },
93
- });
94
- ` ` `
95
-
96
- # ### Webpack
97
-
98
- 1. 必要な依存パッケージをインストールしてください。
99
-
100
- ` ` ` shell
101
- npm install @haixing_hu/vue3-class-component
102
- npm install @babel/core @babel/runtime @babel/preset-env
103
- npm install @babel/plugin-proposal-decorators @babel/plugin-transform-class-properties @babel/plugin-transform-runtime
104
- ` ` `
105
-
106
- 2. [@babel/plugin-transform-class-properties]および、[@babel/plugin-proposal-decorators]プラグインを使用して、[Babel] を設定してください。[Babel]の設定ファイル名は` babelrc.json` であることが多く、以下のような内容です。
107
-
108
- ` ` ` json
109
- {
110
- " presets" : [" @babel/preset-env" ],
111
- " plugins" : [
112
- " @babel/plugin-transform-runtime" ,
113
- [" @babel/plugin-proposal-decorators" , { " version" : " 2023-05" }],
114
- " @babel/plugin-transform-class-properties"
115
- ]
116
- }
117
- ` ` `
31
+ ` vue-facing-decorator ` could be used in pure JavaScript Vue projects. you must enable decorator features manully(e.g. transform decorators by ` babel ` ).
118
32
119
33
## 使用方法
120
34
0 commit comments