

# 環境

[code]

    $ node -v
    v12.13.0
    
    $ vue -V
    @vue/cli 4.5.13
    
    $ yarn -v
    1.22.11
    
[/code]

# セットアップ

[code]

    $ vue create my_project1
    # Default ([Vue 2] babel, eslint) を選択
    
    $ cd my_project1
    
[/code]

ここで外部のライブラリ `my_tools` を `node_modules` 以下に追加します。  
my_tools は Nuxt のプロジェクトでそのライブラリの一部を利用したいという考えです。

[code]

    $ yarn add ~/src/my_tools
    
[/code]

`node_modules/my_tools/components/foo.js` に利用したいクラス `Foo` が入っています。

中身は次のようになっています。

[code]

    export class Foo {
      static VAR1 = 1
    }
    
[/code]

Nuxt 側ではこの Foo クラスは正常にパースできています。

次に `src/main.js` で `foo.js` をインポートします。

[code]

    import Vue from 'vue'
    import App from './App.vue'
    
    // 以下を追加
    /* eslint-disable */
    import { Foo } from "my_tools/components/foo.js"
    /* eslint-enable */
    
    Vue.config.productionTip = false
    
    new Vue({
      render: h => h(App),
    }).$mount('#app')
    
[/code]

ビルドします。

[code]

    vue-cli-service serve
    
[/code]

# 表示されるエラー

[code]

     ERROR  Failed to compile with 1 error                                                                                                                                                                                                10:59:48
    
     error  in ./node_modules/my_tools/components/models/foo.js
    
    Module parse failed: Unexpected token (2:14)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    | export class Foo {
    >   static VAR1 = 1
    | }
    |
    
     @ ./src/main.js 9:0-60
     @ multi (webpack)-dev-server/client?http://10.0.1.2:3100&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
    
[/code]

## babel.config.js の内容

[code]

    module.exports = {
      presets: [
        '@vue/cli-plugin-babel/preset'
      ]
    }
    
[/code]

## package.json の内容

[code]

    {
      "name": "my_project1",
      "version": "0.1.0",
      "private": true,
      "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
      },
      "dependencies": {
        "core-js": "^3.6.5",
        "my_tools": "/Users/xxx/src/my_tools",
        "vue": "^2.6.11"
      },
      "devDependencies": {
        "@vue/cli-plugin-babel": "~4.5.0",
        "@vue/cli-plugin-eslint": "~4.5.0",
        "@vue/cli-service": "~4.5.0",
        "babel-eslint": "^10.1.0",
        "eslint": "^6.7.2",
        "eslint-plugin-vue": "^6.2.2",
        "vue-template-compiler": "^2.6.11"
      },
      "eslintConfig": {
        "root": true,
        "env": {
          "node": true
        },
        "extends": [
          "plugin:vue/essential",
          "eslint:recommended"
        ],
        "parserOptions": {
          "parser": "babel-eslint"
        },
        "rules": {}
      },
      "browserslist": [
        "> 1%",
        "last 2 versions",
        "not dead"
      ]
    }
    
[/code]

# やったこと

@babel/plugin-proposal-class-properties  
<https://runebook.dev/ja/docs/babel/babel-plugin-proposal-class-
properties/index>

を参照し `.babelrc` や `babel.config.js`
にいろいろ追加したのですが、デフォルトで同じような機能が含まれているようで、無駄なことをやっているようにも思える一方で、問題のエラーは解決しないという状況です。

なんでも良いので助言頂けるとありがたいです。よろしくお願いします。


CC BY-SA 4.0
2021-09-13T02:37:44.180
82451
2021-10-03T00:38:36.300
2021-10-03T00:38:36.300
27157
27157
question
javascript vue.js babeljs
vue-cli で作ったプロジェクトに外部ライブラリのクラス定数が含まれるクラスをインポートするにはどうしたらよいでしょうか？