

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

  * [Simonwep / selection](https://github.com/Simonwep/selection#install)

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

./nuxt.config.js

[code]

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

* * *

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

./nuxt.config.js

[code]

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

./pages/index.vue

[code]

    <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]

その結果が以下のようになっています。  
[![<code>npm run dev
エラー</code>](https://i.stack.imgur.com/t7UJC.png)](https://i.stack.imgur.com/t7UJC.png)

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

[![画像の説明をここに入力](https://i.stack.imgur.com/hTHtx.png)](https://i.stack.imgur.com/hTHtx.png)

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

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

[code]

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

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

[![画像の説明をここに入力](https://i.stack.imgur.com/WMQkF.png)](https://i.stack.imgur.com/WMQkF.png)

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

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

./pages/index.vue

[code]

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

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

* * *

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

> webpack v4.8.3 / ProvidePlugin / Usage: Vue.js  
>  <https://webpack.js.org/plugins/provide-plugin/#usage-vue-js>
[code]

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

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

> node_modules\webpack\lib\ProvidePlugin.js

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

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

./nuxt.config.js  

[code]

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

[![画像の説明をここに入力](https://i.stack.imgur.com/CoFCV.png)](https://i.stack.imgur.com/CoFCV.png)

[![画像の説明をここに入力](https://i.stack.imgur.com/tKH4d.png)](https://i.stack.imgur.com/tKH4d.png)

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

[![webpack
version](https://i.stack.imgur.com/rzNot.png)](https://i.stack.imgur.com/rzNot.png)

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


CC BY-SA 4.0
2018-05-20T19:55:46.057
44111
2023-05-10T13:06:25.830
2018-05-21T13:20:08.180
13813
13813
question
nuxt.js
Nuxt.js で selection.js を使えるようにするには？


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

[can't compile object spread operator unexpected token error -
GitHub](https://github.com/JeffreyWay/laravel-
mix/issues/76#issuecomment-271920174)

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

[code]

    npm install --save-dev babel-plugin-transform-object-rest-spread
    
[/code]

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

[code]

    {
      "plugins": ["transform-object-rest-spread"]
    }
    
[/code]


CC BY-SA 4.0
2018-05-21T07:46:21.407
44128
2018-05-21T07:46:21.407
20206
44111
answer