如何在 next.config.js 文件中組合幾個插件？

Question

當我將“next-videos”加載器添加到next.config.js時，只要module.exports進入最后一個，它就可以完美運行：

module.exports = withVideos()

另一方面，它破壞了位於上面的另一個module.exports實例：

module.exports = {
   images: {
     domains: ['cdn.shopify.com'],
   },
};

基本上，它會覆蓋之前的每一個module.exports 。 合並這些出口的規則是什么？ 我想我需要將它們放在一個模塊下，但是這樣做的規則是什么？ 我弄亂了語法，每次嘗試將其重新定位在一個模塊下。 module.exports以新錯誤結束

簡單總結一下問題：

1. 在單個導出中組合模塊的規則是什么以及如何將它與我以前的所有 module.exports 組合？

2. 我真的需要在 next.config 中留下與上面相同部分重復的“webpack(config)”部分嗎？ 我從不同的來源收集了它，現在試圖弄清楚它是如何工作的

webpack(config) { 
  config.module.rules.push(

next.config.js的內容：

const withPlugins = require('next-compose-plugins');
const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');
const withImages = require('next-images');
const withVideos = require('next-videos');
const withBundleAnalyzer = require('@next/bundle-analyzer')({
    enabled: process.env.ANALYZE === 'true',
});

// next.config.js
module.exports = withPlugins(
    [[withImages], [withSass], [withCSS], [withVideos]],
    {
        plugins: ['postcss-import', 'tailwindcss', 'autoprefixer'],
        serverRuntimeConfig: {
            mySecret: 'secret',
            secondSecret: process.env.SECOND_SECRET, // Pass through env variables
        },
        publicRuntimeConfig: {
            // Will be available on both server and client
            staticFolder: '/public',
        },
        module: {
            loaders: [
                {
                    test: /.jsx?$/,
                    loader: 'babel-loader',
                    exclude: /node_modules/,
                },
                {
                    test: /\.css$/,
                    loader: 'style-loader!css-loader',
                },
                {
                    test: /\.jsx?$/,
                    use: ['babel-loader', 'astroturf/loader'],
                },
                {
                    test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
                    loader: 'url-loader?limit=100000',
                },
                {
                    test: /\.(eot|woff|woff2|otf|ttf|svg|png|jpg|gif|webm)$/,
                    use: {
                        loader: 'url-loader',
                        options: {
                            limit: 100000,
                            name: '[name].[ext]',
                        },
                    },
                },
                {
                    test: /\.mp4$/,
                    use: 'file-loader?name=videos/[name].[ext]',
                },
                {
                    test: /\.style.js$/,
                    use: [
                        'style-loader',
                        {
                            loader: 'css-loader',
                            options: { importLoaders: 1 },
                        },
                        {
                            loader: 'postcss-loader',
                            options: { parser: 'sugarss', exec: true },
                        },
                    ],
                },
            ],
        },
        webpack(config) {
            config.module.rules.push(
                {
                    test: /\.(eot|woff|woff2|otf|ttf|svg|png|jpg|gif)$/,
                    use: {
                        loader: 'url-loader',
                        options: {
                            limit: 100000,
                            name: '[name].[ext]',
                        },
                    },
                },
                {
                    test: /\.style.js$/,
                    use: [
                        'style-loader',
                        'css-loader',
                        {
                            loader: 'css-loader',
                            options: { importLoaders: 1 },
                        },
                        {
                            loader: 'postcss-loader',
                            options: { parser: 'sugarss', exec: true },
                        },
                    ],
                },
                {
                    test: /\.(js|jsx)$/,
                    exclude: /node_modules/,
                    use: ['babel-loader', 'eslint-loader'],
                },
            );
            withBundleAnalyzer({});
            return config;
        },
    },
    {
        images: {
            domains: ['cdn.shopify.com'],
        },
    },
    withVideos(),
);

module.exports = {
    extends: 'airbnb-base',
    rules: {
        'arrow-body-style': 0,
    },
};

module.exports = {
    images: {
        domains: ['cdn.shopify.com'],
    },
};

module.exports = withVideos();

Answer 1

您似乎在 Next.js 配置文件中錯誤地混合了幾個配置。

使用next-compose-plugins

首先，你的next.config.js應該只有一個module.exports ，並且由於你使用的是next-compose-plugins ，它應該大致遵循以下結構：

// next.config.js

// Omitting requires for simplicity
 
module.exports = withPlugins(
    [withImages, withSass, withCSS, withVideos, withBundleAnalyzer], // All next plugins go here
    // Below is the main Next.js config object
    { 
        images: {
            domains: ['cdn.shopify.com']
        },
        serverRuntimeConfig: {
            mySecret: "secret",
            secondSecret: process.env.SECOND_SECRET
        },
        publicRuntimeConfig: {
          staticFolder: "/public"
        },
        // From here everything that's Webpack-related
        webpack(config) {
            // Add your custom Webpack configs
            return config;
        }
    }
);

沒有next-compose-plugins

不使用next-compose-plugins也可以通過鏈接插件來實現相同的目的。

// next.config.js

// Omitting requires for simplicity
 
module.exports = withImages(
    withSass(
        withCSS(
            withVideos(
                withBundleAnalyzer({
                    images: {
                        domains: ['cdn.shopify.com']
                    },
                    serverRuntimeConfig: {
                        mySecret: "secret",
                        secondSecret: process.env.SECOND_SECRET
                    },
                    publicRuntimeConfig: {
                        staticFolder: "/public"
                    },
                    // From here everything that's Webpack-related
                    webpack(config) {
                        // Add your custom Webpack configs
                        return config;
                    }
                })
            )
        )
    )
);

---

最后，以下配置屬於您的 ESlint 配置文件，而不是 Next.js 配置。

// .eslintrc.js
module.exports = {
    extends: 'airbnb-base',
    rules: {
        'arrow-body-style': 0,
    },
};

Answer 2

當我嘗試從節點包訪問全局 css 文件到 Next JS 頁面時，我遇到了類似的問題，經過多次試驗，我通過更改以下內容解決了：

當需要使用多個插件或使用插件的普通JSON配置時，您需要將原始配置包裝在插件中。

在你的情況下，

module.exports = withVideos(
images: {
     domains: ['cdn.shopify.com'],
   },
)

Answer 3

如果沒有next-compose-plugins庫，這也可以很容易地完成。 它也可以說更清楚一點：

// next.config.js
const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');

module.exports = (phase, { defaultConfig }) => {
  const plugins = [
    withSass({ /* Plugin config here ... */ }),
    withCSS({ /* Plugin config here ... */ }),
  ];
  return plugins.reduce((acc, next) => next(acc), {
    /* global config here ... */
  });
};

從這里的解決方案回答-> https://stackoverflow.com/a/68250707/2419584