redux、scss/less、antd按需加载、typescript整合nextjs

最新推荐文章于 2024-07-29 08:02:47 发布

置顶

Mack Liu

最新推荐文章于 2024-07-29 08:02:47 发布

阅读量1.9k

点赞数

分类专栏： react TypeScript Nextjs 文章标签： React TypeScript Antd Nextjs

本文链接：https://blog.csdn.net/weixin_43902189/article/details/99678549

版权

这篇博客详细介绍了如何在Next.js项目中集成Redux、SCSS/Less、Ant Design按需加载，并且配合使用TypeScript。包括创建Next.js脚手架、安装相关依赖、配置next.config.js、引入Redux和装饰器写法，以及最后的配置检查和启动服务。

摘要由CSDN通过智能技术生成

redux、scss/less、antd按需加载、typescript整合nextjs步骤如下:(如有侵权，可以留言，?)

本次案例使用了nextjs的脚手架搭建和一些依赖安装

*在本博客后面会贴上代码案例,不想看步骤的大佬可以直接拉到最下面，萌新博客见谅

1.安装create-next-app(mac用户记得加上sudo)

cnpm i -g create-next-app //全局安装next脚手架,使用npx的用户可以跳过这步骤

2.创建脚手架（脚手架默认引入antd）

create-next-app --example with-ant-design with-redux-app // 引入ant-design的next项目
//npx安装
npx create-next-app --example with-ant-design with-redux-app

3.安装scss(不需要使用的可以跳过这个步骤)

null-loader 一个加载器，返回一个空模块(萌新不是很清楚)

cnpm i @zeit/next-sass node-sass null-loader --save  //@zeit/next-sass依赖于@zeit/next-css 所以无需引入css

4.安装next-compose-plugins(让项目同时使用sass/less/css) 想使用less的大佬看下面的less配置

cnpm i next-compose-plugins --save //结合sass 、 less 和 css

5.重新配置next.config.js文件

const withCss = require('@zeit/next-css')
const withSass = require('@zeit/next-sass');
const withPlugins = require("next-compose-plugins/lib");//结合sass css
module.exports = withPlugins([withSass,withCss],{
   //[withSass,withCss]可以引入各种依赖，less也可以
  webpack: (config, {
    isServer }) => {
   
    if (isServer) {
   
      const antStyles = /antd\/.*?\/style\/css.*?/
      const origExternals = [...config.externals]
      config.externals = [
        (context, request, callback) => {
   
          if (request.match(antStyles)) return callback()
          if (typeof origExternals[0] === 'function') {
   
            origExternals[0](context, request, callback)
          } else {
   
            callback()
          }
        },
        ...(typeof origExternals[0] === 'function' ? [] : origExternals),
      ]
      config.module.rules.unshift({
   
        test: antStyles,
        use: 'null-loader',
      });
    }
    return config
  },
})

6.引入redux、react-redux、redux-thunk、redux-devtools-extension

cnpm i react-redux redux redux-devtools-extension redux-thunk --save//引入依赖

7.引入下面的高阶组件with-redux-redux.js(代码如下)

import React from 'react'
import {
    initializeStore } from '../redux/store'//引入初始化的store

const isServer = typeof window === 'undefined';//判断一下window在不在
const __NEXT_REDUX_STORE__ = '__NEXT_REDUX_STORE__'//定一个常量用来对象存储的key名

function getOrCreateStore (initialState) {
   
  // Always make a new store if server, otherwise state is shared between requests
  if (isServer) {
   //当window不存在的时候 直接返回初始化的整个store 就是在服务器的时候
    return initializeStore(initialState)
  }

  // Create store if unavailable on the client and set it on the window object
  if (!window[__NEXT_REDUX_STORE__]) {
   //这个索引的对象不存在 客户端的时候，注入一个属性
    window[__NEXT_REDUX_STORE__] = initializeStore(initialState)//就初始化整个store给它
  }
  return window[__NEXT_REDUX_STORE__]//最终返回这个对象的key为__NEXT_REDUX_STORE__的值，也就是初始化的整个store
}

export default App => {
   //App为传入的组件
  return class AppWithRedux extends React.Component {
   
    static async getInitialProps (appContext) {
   
      // Get or Create the store with `undefined` as initialState
      // This allows you to set a custom default initialState
      const reduxStore = getOrCreateStore();//获取初始化的整个store

      // Provide the store to getInitialProps of pages
      appContext.ctx.reduxStore = reduxStore//然后赋值给整个上下文

      let appProps = {
   }
      if (typeof App.getInitialProps === 'function') {
   
        appProps = await App.getInitialProps(appContext)
        // console.log(appProps);
      }

      return {
   
        ...appProps,
        initialReduxState: reduxStore.getState()//获取初始化的state值
      }
    }

    constructor (props) {
   
      super(props)
      // console.log(props);
      this.reduxStore = getOrCreateStore(props.initialReduxState);//获取整个store
    }

    render () {
   
      return <App {
   ...this.props} reduxStore={