0

Nuxt.js (Vue) で Selection.js を使いたいのですが、どのように設定すれば使えるようになるのでしょうか?

例えば、moment.js は以下のようにして使えるようになったのですが、selection.js はうまく行きませんでした。

./nuxt.config.js

const webpack = require('webpack')

module.exports = {
  build: {
    ...
    vendor: [
      'moment'
    ],
    plugins: [
      new webpack.ProvidePlugin({
        'moment': 'moment'
      })
    ]
  },
  ...
}

以下の方法を試した時の結果を追加します。

./nuxt.config.js

module.exports = {
  (vue init で生成された時のまま...)
  ...
  mode: 'spa'
}

./pages/index.vue

<template>
  <section class="container">
    <ul>
      <li v-for="b in bs" :key="b.name">
        {{ b.name }}
      </li>
    </ul>
  </section>
</template>

<script>
  import Selection from '@simonwep/selection-js'

  export default {
    data () {
      return {
        bs: [...new Array(10)].map((b, i) => {
          return {
            name: `b${i}`,
          };
        })
      }
    },
    mounted () {
      const options = {
        containers: ['ul'],
        boundarys: ['ul'],
      };
      Selection.create(options)
    }
  }
</script>

その結果が以下のようになっています。
<code>npm run dev エラー</code>

下記エラーメッセージを見ると、selection.js の 353行目 (①) で Unexcepted token と言っています。

画像の説明をここに入力

353行目は「...options」(②) なので、spread syntax を解釈できないんだろうなと思い、selection.js の package.json を以下のように書き換えてみました。

./node_modules/@simonwep/selection-js/package.json

"main": "selection.min.js", ..................................... (1)
...
"scripts": {
  "build": "babel selection.js --out-file selection.min.js" ..... (2)
},

上記 (2) を見ると babel による transpile の結果が selection.min.js なので、上記 (1) に selection.min.js を指定し、再度 npm run dev すると、下図の通り、selection.js を使うことができました。

画像の説明をここに入力

となると、結局は selection.js の package.json をいじること無く、selection.min.js を使うように指定すればいいだけのようです。

で、その指定方法は以下のようにするだけですが、

./pages/index.vue

import Selection from '@simonwep/selection-js/selection.min.js'

他の .vue でも使いたいので、nuxt.config.js にどう記述したら良いのでしょう?


以下を参考に webpack.ProvidePlugin を書き直してたんですが、

webpack v4.8.3 / ProvidePlugin / Usage: Vue.js
https://webpack.js.org/plugins/provide-plugin/#usage-vue-js

new webpack.ProvidePlugin({
  Vue: ['vue/dist/vue.esm.js', 'default']
})

どうしても動かないから、下記ソースコードを読んでいたらどうも上記サンプルが想定する動きと何か違う。

node_modules\webpack\lib\ProvidePlugin.js

これ、webpack 4 のドキュメントなんですよね。
v3 のドキュメントが見つからない。

ソースコードに合わせて設定してみたところ、以下で動きました。

./nuxt.config.js

build: {
  ...
  plugins: [
    new webpack.ProvidePlugin({
      'Selection': '@simonwep/selection-js/selection.min.js'
    })
  ]
},
mode: 'spa'

画像の説明をここに入力

画像の説明をここに入力

nuxt v1.4.0 は webpack v3.12.0 を使ってるんですね。

webpack version

webpack v3 のドキュメントは何処にあるんだろう?

2
  • どのように使うのが理想なのでしょうか、単純に import Selection from '@simonwep/selection-js' で済む話?
    – hinaloe
    Commented 2018年5月20日 21:56
  • 情報ありがとうございます。 まずはエラー無く動くことを確認したいので、その方法でも構いません。 私もそれは試していたのですが、質問の追加画像に有るエラーが出てしまいました。
    – 76e9b8
    Commented 2018年5月21日 6:09

1 件の回答 1

0

これを試してみてください。

can't compile object spread operator unexpected token error - GitHub

日本語で言うと、transform-object-rest-spreadプラグインをインストールして、

npm install --save-dev babel-plugin-transform-object-rest-spread

プロジェクトのルートフォルダーに.babelrcを作成して、以下を入力してください。

{
  "plugins": ["transform-object-rest-spread"]
}
3
  • 情報ありがとうございます。今から試してみます。
    – 76e9b8
    Commented 2018年5月21日 8:13
  • .babelrcを使わなくても、nuxt.config.jsにプラグインを指定できるかもしれません。ja.nuxtjs.org/api/configuration-build/#babel
    – sigh
    Commented 2018年5月21日 8:21
  • karamarimo さんの情報を元に、全く新規に nuxt project を作成して babel-plugin-transform-object-rest-spread を試してみました。構成は質問の追加画像として載せています。 結果としては、npm run dev してみたら、初期と同じエラーが出てしまいました。
    – 76e9b8
    Commented 2018年5月21日 8:45

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。