Next JS config 多插件配置 [英] Next JS config multiple plugin configuration
问题描述
const {
DEVELOPMENT_SERVER,
PRODUCTION_BUILD
} = require("next/constants");
require('dotenv').config()
const path = require('path')
const Dotenv = require('dotenv-webpack')
const nextConfig = {
webpack: config => ({ ...config, node: { fs: "empty" } })
};
module.exports = phase => {
if (phase === DEVELOPMENT_SERVER || phase === PRODUCTION_BUILD) {
const withCSS = require("@zeit/next-css");
return withCSS(nextConfig);
}
return nextConfig;
};
*module.exports = {
webpack: (config) => {
config.plugins = config.plugins || []
config.plugins = [
...config.plugins,
// Read the .env file
new Dotenv({
path: path.join(__dirname, '.env'),
systemvars: true
})
]
return config
}
}*
let prefix;
switch (process.env.NODE_ENV) {
case "test":
prefix = "https://test.domain.com/providers";
break;
case "stage":
prefix = "https://state.domain.com/providers";
break;
case "production":
prefix = "https://production.domain.com/providers";
break;
default:
prefix = "";
break;
}
module.exports = {
distDir: "build",
assetPrefix: prefix
};
这里是我的 next.config.js 配置.但是当我尝试运行时,会收到类似的消息错误!网络错误:JSON 中位置 0 处的意外标记 N
Here my next.config.js configuration. But when I am trying to run then getting the message like Error! Network error: Unexpected token N in JSON at position 0
但是当我尝试在粗体(*)中运行任何内容并仅将其保留在 next.config.js 中时,则工作正常.如何在module.export中配置多个插件
But when I am trying to run whatever into the bold(*) and kept only that thing into the next.config.js then working fine. How to configure multiple plugin into the module.export
推荐答案
next-compose-plugins
插件提供了一个更清晰的 API,用于为 next.js 启用和配置插件.
next-compose-plugins
plugin provides a cleaner API for enabling and configuring plugins for next.js.
安装 npm install --save next-compose-plugins
在next.config.js
中使用:
// next.config.js
const withPlugins = require('next-compose-plugins');
const images = require('next-images');
const sass = require('@zeit/next-sass');
const typescript = require('@zeit/next-typescript');
// optional next.js configuration
const nextConfig = {
useFileSystemPublicRoutes: false,
distDir: 'build',
};
module.exports = withPlugins([
// add a plugin with specific configuration
[sass, {
cssModules: true,
cssLoaderOptions: {
localIdentName: '[local]___[hash:base64:5]',
},
}],
// add a plugin without a configuration
images,
// another plugin with a configuration
[typescript, {
typescriptLoaderOptions: {
transpileOnly: false,
},
}],
], nextConfig);
这篇关于Next JS config 多插件配置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!