@@ -28,93 +28,7 @@ npm install --save vue-facing-decorator
2828
2929### JavaScript プロジェクト
3030
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 ` ).
11832
11933## 使用方法
12034
0 commit comments