web-dev-qa-db-ja.com

Nudashでlodashから必要なモジュールのみをどのように含めるのですか？Vuejsプロジェクト？

Nuxt/VueJSプロジェクトを構築しました。

Nuxtにはnuxt.config.jsという独自の構成ファイルがあり、その中でwebpackやその他のビルド設定を構成します。

Package.jsonには、lodashパッケージが含まれています。

私たちのコードでは、必要なものだけを読み込むように注意しています。次に例を示します。

import orderBy from 'lodash/orderBy'

nuxt.config.jsでは、lodashがvendorリストに追加されます。

ただし、ビルドを作成するとき、webpackには、コードで使用したものだけを含めるのではなく、常にlodashライブラリ全体が含まれます。

私は数多くのチュートリアルを読みましたが、答えがありません。それらの答えのいくつかは、それがwebpackのみのプロジェクトであれば確実に機能します。しかし、私たちの場合、それはnuxt設定ファイルを介して行われます。

いくつかの助けを楽しみにしています。

以下は、部分的なnuxt.config.jsファイルです。関連する/重要なパーツのみが含まれます：

const resolve = require('resolve')
const webpack = require('webpack')

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
  },
  modules: [
    ['@nuxtjs/component-cache', { maxAge: 1000 * 60 * 10 }]
  ],
  plugins: [
    { src: '~/plugins/intersection', ssr: false },
  ],
  build: {
    vendor: ['moment', 'lodash'],
    analyze: {
      analyzerMode: 'static'
    },
    postcss: {
      plugins: {
        'postcss-custom-properties': false
      }
    },
    plugins: [
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
    ],
    /*
    ** Run ESLINT on save
    */
    extend (config, ctx) {
      // config.resolve.alias['create-api'] = `./create-api-${ctx.isClient ? 'client' : 'server'}.js`

    }
  }
}
javascriptwebpackvue.jslodashnuxt.js
11
asanas

あなたはできる npm install必要なパッケージのみ

Lodashは カスタムビルド ごとに分割できます。あなたはすでに利用可能なもののリストを見つけることができます ここ 。次のように使用できます：npm i -S lodash.orderby。チェックしませんでしたが、おそらくimport orderBy from 'lodash/orderBy'〜import orderBy from 'lodash.orderby'。

6
Greaka