javascript - 如何在 next.config.js 文件中组合几个插件?
问题描述
当我将“下一个视频”加载器添加到最后一个时,next.config.js
它可以完美地工作module.exports
:
module.exports = withVideos()
另一方面,它打破了module.exports
上面的另一个实例:
module.exports = {
images: {
domains: ['cdn.shopify.com'],
},
};
基本上,它会覆盖每个以前module.exports
的 . 合并这些出口的规则是什么?我想我需要将它们放在一个模块下,但是这样做的规则是什么?我弄乱了语法,每次尝试将其重新定位到一个module.exports
结尾都会出现新错误
简单总结一下问题:
在单个导出中组合模块的规则是什么以及如何将它与我以前的所有 module.exports 组合?
我真的需要在 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();
解决方案
您似乎将几个配置错误地混合到 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,
},
};
推荐阅读
- reactjs - 我可以从控制台更改从组件状态填充的输入值吗
- c# - 如何更改 Outlook COM 加载项中已创建约会的“发件人”?
- angular - 带有ssr生产构建错误的Angular 6 Universal
- svg - 如何将悬停效果添加到带有 SVG 的 html img 标签,因为它是 src
- elasticsearch - AWS Elasticsearch:如何更新现有索引的分析器设置
- c++ - 为什么 std::function 模板构造函数不使用通用引用?
- laravel - Laravel:高级多态关系
- git - 如何从子树仓库中提取子模块?
- python - 在Python中获取特殊字符之后和之前的字符串
- angular - 带有 ios 和 android 的自定义图标