如何在 next.config.js 文件中的一个模块(module.exports)中组合多个导出? [英] How to combine several exports inside one module (module.exports) inside next.config.js file?
问题描述
当我添加 "next-videos"loader 到 next.config.js 只要 module.exports 进入最后一个，它就可以完美运行:
When I add "next-videos" loader to the next.config.js it works perfectly as long as module.exports goes the last one:
module.exports = withVideos()
另一方面，它破坏了位于上面的另一个 module.exports 实例:
On the other hand, it breaks another instance of module.exports that located above:
module.exports = {
images: {
domains: ['cdn.shopify.com'],
},
};
基本上，它会覆盖之前的每个 module.exports.合并这些出口的规则是什么?我想我需要将它们放在一个模块下，但是这样做的规则是什么?我搞砸了语法，每次尝试将其重新定位在一个 module.exports 下都会以新错误结束
Basically, it overwrites every previous module.exports. What are the rules for combining these exports? I guess I need to put them under one module but what are the rules to do it? I'm messing up with syntax and every try to relocate it under one module.exports ends with new errors
只是总结一下问题:
在单个导出中组合模块的规则是什么以及如何将它与我以前的所有 module.exports 组合?
我真的需要离开webpack(config)"吗?在 next.config 中重复上面相同部分的部分?我从不同的来源收集了它，现在试图弄清楚它是如何工作的
Do I really need to leave "webpack(config)" part that duplicates the identical part above inside next.config? I gathered it from different sources and now trying to figure out how does it really work
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();
提前谢谢你，如果有人能澄清这一点，我将不胜感激.
Thank you in advance, I would be very grateful if anyone could clarify this one.
推荐答案
您似乎错误地将多个配置混合到 Next.js 配置文件中.
You seem to be mixing several configs incorrectly into your Next.js config file.
首先，您的 next.config.js 应该只有一个 module.exports，因为您使用的是 next-compose-plugins，大致应该是这样的结构:
To begin with your next.config.js should only have a single module.exports, and since you're using next-compose-plugins, it should roughly follow this structure:
// 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 也可以通过链接插件来实现同样的效果.
Without next-compose-plugins
The same can be achieved without using next-compose-plugins, by chaining the plugins instead.
// 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 配置.
Finally, the following config belongs to your ESlint config file, and not Next.js config.
// .eslintrc.js
module.exports = {
extends: 'airbnb-base',
rules: {
'arrow-body-style': 0,
},
};
这篇关于如何在 next.config.js 文件中的一个模块(module.exports)中组合多个导出?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
