梵总发布的帖子

梵

其實在next.config.js裡加env，這個值會在build的時候被用上。

const withPlugins = require("next-compose-plugins");
const css = require("@zeit/next-css");

// require("dotenv").config();

const nextConfig = {
  target: "serverless",
  webpack(config) {
    config.module.rules.push({
      test: /\.(png|svg|eot|otf|ttf|woff|woff2)$/,
      use: {
        loader: "url-loader",
        options: {
          limit: 8192,
          publicPath: "/_next/static/",
          outputPath: "static/",
          name: "[name].[ext]"
        }
      }
    });
    return config;
  },
  env: {
    API_HOST: "http://www.localhost:3030"
  }
  // publicRuntimeConfig: {
  //   // Will be available on both server and client
  //   API_HOST: process.env.API_HOST
  // }
};

module.exports = withPlugins([[css]], nextConfig);

這樣更好。
注意使用"now"來部署是serverless，所以用不了publicRuntimeConfig。

梵

新版NextJS（我用的是V9)是支持dotenv的。
只需要：

npm install dotenv

然後在next.config.js裡加入一行：

require("dotenv").config();

無需很多過時的網絡教程說的要通過webpack把env導入config裡。
但是要注意：

PORT = 5000 不能用 - 好像next.config.js是在APP運行後才加載的，那是默認3000已經定了
dotenv是服務器端的事，因為它要從文件系統裡讀取.env 所以你可能需要publicRuntimeConfig.
publicRuntimeConfig 不能和 target:serverless合用。
我現在的next.config.js如下：

const withPlugins = require("next-compose-plugins");
const css = require("@zeit/next-css");

require("dotenv").config();

const nextConfig = {
  // target: "serverless",
  webpack(config) {
    config.module.rules.push({
      test: /\.(png|svg|eot|otf|ttf|woff|woff2)$/,
      use: {
        loader: "url-loader",
        options: {
          limit: 8192,
          publicPath: "/_next/static/",
          outputPath: "static/",
          name: "[name].[ext]"
        }
      }
    });
    return config;
  },
  publicRuntimeConfig: {
    // Will be available on both server and client
    API_HOST: process.env.API_HOST
  }
};

module.exports = withPlugins([[css]], nextConfig);

在page/*.js下讀取publicRuntimeConfg 是這樣的：（有點麻煩）

import getConfig from "next/config";
const { publicRuntimeConfig } = getConfig();
const authenticate = e => {
    e.preventDefault();
    if (username != "" && password != "") {
      axios
        .post(publicRuntimeConfig.API_HOST + "/authentication", {
          strategy: "local",
          email: username,
          password: password
        })
        .then(function(response) {
          console.log(response);
          signIn(username);
        })
        .catch(function(error) {
          console.log(error);
          setMessage("Invalid Login");
        });
    } else {
      setMessage("Please enter your username and password");
    }
  };

梵

項目使用Semantic-UI，其實可以直接用semantic-ui-css 但是它不支持自定義build，也就是所以css都是定義好了，你只能直接用，或者用override 的方法。
另外一種方法是用‘Fomantic-UI ', 不爽的是這麼一來我的package.json又開始臃腫了。

  "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "next-compose-plugins": "^2.2.0",
    "semantic-ui-react": "^0.88.1",
    "styled-components": "^4.3.2"
  },
  "devDependencies": {
    "file-loader": "^4.1.0",
    "fomantic-ui": "^2.7.8",
    "url-loader": "^2.1.0"
  }

以上除了semantic-ui-react，其他都是為了可以用自定義主題而增加的。
另外，還有

pages/_app.js
pages/_document.js
next.config.js
semantic.json

另外在package.json裡加上一些scripts：

    "now-build": "npm run semantic:build && next build",
    "semantic:build": "cd .semantic && gulp build-css build-assets",
    "semantic:watch": "cd .semantic && npm run semantic:build && gulp watch",

請到這裡下載這些文件：https://github.com/skydiver/nextjs-semantic
之後，run

npm install
npm run semantic:build
npm run dev

這樣就差不多了。

梵

這裡想介紹一下我的React新項目設置

輕裝上陣

React很酷，但是要維護一堆的packages不是一件容易的事。我看好多開發人員是乾脆不理會outdated的packages，能用就行。
如果你有更新慾望症，那麼或許可以試試NextJS，建立一個簡單的App，只需要這些packages：

  "dependencies": {
    "isomorphic-unfetch": "^3.0.0",
    "next": "^9.0.5",
    "react": "^16.9.0",
    "react-dom": "^16.9.0"
  },

工具統一

這幾年VSCODE很火，微軟的開源貨可以說可圈可點。之前我用webstorm，其一不是免費，其二不見比VSCODE要好，其三我搞不定如何使用formatting/fix on save. 所以已經被我放棄。
我建議一個團隊使用統一的工具，IDE、Plugins、配置等等。
VSCODE下必須的三個插件：

Eslint
Prettier - Code formatter
GitlLens
記得把ESlint的 Auto Fix On Save的選項選上

項目下的ESlint安裝（nextjs)

網上教程很多，（也很亂！！！）用下面這個簡單版（不含airebnb，如果你真的那麼崇拜airebnb，請留言，我可以抽空加上）

npm i --save-dev babel-eslint
npm i --save-dev eslint
npm i --save-dev eslint-plugin-react

在根目錄下創建.eslintrc, 寫入下面內容：

{
  "parser": "babel-eslint",
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "rules": {
    "react/react-in-jsx-scope": "off"
  },
  "globals": {
    "React": "writable"
  }
}

接下來，你可能會碰到Eslint報錯，比如missing prop validation console is not definded,等，你在根據需要來在代碼或者eslintrc裡調整。
注意：不用裝eslint-prettier，vscode的prettier好像可以take care這些。記住不用選“integrate with eslint” 新版的prettier (2.2.2) 好像連這個選擇都沒了。

梵

有的東西看似很簡單，但是有時候你沒認真看，它會把你玩死。
Bitbucket SSH的設置，設置好了，以後就不用輸密碼了。但是你設了，還是不行，為什麼？
10有8，9，你設錯地方了。

一個是在repsoitory底下，這個是個read 用的，寫不了。

Use access keys to gain read-only access to this repository. Learn more about using SSH keys.
read-only, 我沒有注意到，同學們注意到了嗎？

如果你是要加個可以寫的SSH key，那麼把這個刪除了，注意要刪除乾乾淨淨，就是不小心在其他repo裡加的要通通刪除了。然後在用戶設置裡（點左下角的頭像）設置SSH。

祝你好運！

梵

Apollo client 聲稱他們把緩存玩的很好，用過以後才知道其實不然。
更新緩存，還是很手動的活。比如：

 <Mutation
          mutation={DELETE_CUSTOMPAGE}
          key={item.draftid}
          update={cache => {
            const { customPages } = cache.readQuery({ query: GET_CustomPages });
            const newCustomPages = [...customPages];
            const idx = _.findIndex(newCustomPages, {
              id: item.id
            });

            if (idx > -1) {
              newCustomPages.splice(idx, 1);
            }

            cache.writeQuery({
              query: GET_CustomPages,
              data: { customPages: newCustomPages }
            });
          }}
        >

在同一個模塊，加這些cache處理還不算太麻煩，問題是另一個模塊要用到其他模塊，要保證其他模塊修改後，通知所有相關模塊也更新對於的QUERY是極其麻煩的。

因此，有人問題這個問題 - 如何把緩存關閉：
https://stackoverflow.com/questions/47879016/how-to-disable-cache-in-apollo-link-or-apollo-client

其中一位大哥的答案（非選中的）解決了我的問題：

I would always suggest not to disable inbuild caching feature from apollo client. Instead you can always set fetchPolicy: 'network-only' for an individual queries. Something like this

<Query
    query={GET_DOG_PHOTO}
    variables={{ breed }}
    fetchPolicy='network-only'
>
 {({ loading, error, data, refetch, networkStatus }) => {
   ...
 }}
</Query>

While fetching data with this Query, it would always do a network request instead of reading from cache first.

梵

Easier way

const groupBy = (items, key) => items.reduce(
  (result, item) => ({
    ...result,
    [item[key]]: [
      ...(result[item[key]] || []),
      item,
    ],
  }), 
  {},
);


const pets = [
    {type:"Dog", name:"Spot"},
    {type:"Cat", name:"Tiger"},
    {type:"Dog", name:"Rover"}, 
    {type:"Cat", name:"Leo"}
];
    

const result = groupBy(pets, 'type');
console.log(result);

梵

function groupBy(list, keyGetter) {
    const map = new Map();
    list.forEach((item) => {
         const key = keyGetter(item);
         const collection = map.get(key);
         if (!collection) {
             map.set(key, [item]);
         } else {
             collection.push(item);
         }
    });
    return map;
}


function strMapToObj(strMap) {
  let obj = Object.create(null);
  for (let [k,v] of strMap) {
    // We don’t escape the key '__proto__'
    // which can cause problems on older engines
    obj[k] = v;
  }
  return obj;
}
function objToStrMap(obj) {
  let strMap = new Map();
  for (let k of Object.keys(obj)) {
    strMap.set(k, obj[k]);
  }
  return strMap;
}

// example usage

const pets = [
    {type:"Dog", name:"Spot"},
    {type:"Cat", name:"Tiger"},
    {type:"Dog", name:"Rover"}, 
    {type:"Cat", name:"Leo"}
];

//use map to get new pets

    
const grouped = groupBy(pets, pet => pet.type);

const groupedObj = strMapToObj(grouped);




// const groupedStr = JSON.stringify([...grouped]);
// const groupedJson = JSON.parse(groupedStr);

// console.log(JSON.stringify([...grouped]));
// console.log(groupedJson);

梵

如何在一個組件里使用主題顏色？
如果你從Bootstrap CSS過來，你可能希望我們可以這麼寫：
<p class="text-primary">.text-primary</p>
寫成react就是這樣嘍：
<p className="text-primary">.text-primary</p>
很抱歉，這麼寫行不通！

必須這麼弄：

import { withStyles } from "@material-ui/core/styles";
const styles = theme => ({
  paper: {
    position: "absolute",
    width: "90%",
    backgroundColor: theme.palette.background.paper,
    boxShadow: theme.shadows[5],
    padding: theme.spacing.unit * 4,
    outline: "none",
    height: "90vh",
    overflowY: "scroll",
    color: theme.palette.primary.main
  }
});
class YourComponent extends React.Component {
...
}
export default withStyles(styles)(YourComponent);

material-ui 默認主題屬性可以在這裡查看：https://material-ui.com/customization/default-theme/

梵

moment.unix(ts/ 1000).format("MM/DD/YYYY HH:mm")
'ts' 是MySQL的datetime，除以1000得到秒值，然後再格式化

梵

NodeBB的主題功能不錯，自帶的幾個主題也相當專業，但是不論多好的主題，都有不盡人意的地方，所謂蘿蔔青菜各有所愛。

如果你想對現有的主題做些修改，這個原本相當容易的事情，在NodeBB下變得沒那麼容易了，因為主題是一Package的方式存在，雖然你可以在node_modules下找打對應的主題源代碼，通過修改CSS或者模板，重新Build也可能行的通，但是下次升級你可能會碰到意想不到的問題。所以正確的做法是到原有模板的Github頁面，把項目Clone到本地，然後對他進行修改。之後，你可以把這個主題上傳的服務器，運行
npm install PATH_TO_THEME
比如：我在NodeBB的根目錄下(通常”/opt/nodebb") 有個文件夾“myTheme”, 裡面有我的主題“nodebb-theme-j4fun"，那麼運行命令如下：
npm install myTheme/nodebb-theme-j4fun

然後到NodeBB的Admin後台激活這個主題，然後重新部署即可。

有個值得一提的是，不知道從哪個版本開始(可能是V1.12.x,) The CSS如今變了，之前是：
<link rel="stylesheet" type="text/css" href="{relative_path}/assets/stylesheet.css?{config.cache-buster}" />
新版本不在用stylesheet.css了，必須改為client.css。不然的CSS的修改不會生效。

梵

NodeBB升級后，圖片不能上傳了，頭像也該不了了。用Chrome Inspector查了一下，出現socket.io斷鏈的錯誤。二丈摸不著頭！Google了一把，解決方案很簡單，只需要在跟目錄下，運行下面cmd：
npm install --build-from-source sharp

不用重啟，立即生效！
參考文獻：https://community.nodebb.org/topic/13422/connection-lost-when-attempting-to-upload-a-new-profile-picture-or-cover-picture/16

延伸閱讀：sharp是什麼東西？
https://www.npmjs.com/package/sharp
哦，是圖片裁剪模塊

梵

内存问题可以用以下方法来解决：

"start": "react-app-rewired --max-old-space-size=4096 start",
"build": "export NODE_OPTIONS='--max-old-space-size=4096' && react-app-rewired build",

梵

今天手动更新，碰到这个错误：

No module named _cffi_backend

不知何故，不过容易解决，重新装一箱cffi就可以了：

For python2.x use following command:

python -m pip install cffi

for python3.x

python3 -m pip install cffi

梵

软件版本通常分3级：

第一个数字代表大版本
第二个数字代表小版本
第三个数字代表小打小闹 - bug fixes等

V15 到 V16 是大版本升级，惊心动魄的新功能不少：

fragments - 曾几何时，render()必须且只能返回一个node，因此，你不得不加上一些不必要的<div>把多个node包起来。fragments 让你可以直接render一个数组。这个配上map真是太完美了。注意：key是需要的，这个有点烦。所以v16.2.0后，我们可以用特殊字符<>, 例如：<><li /><li /><>，这样可以就可省略了。
对了，你可以直接返回字符串了 - 不由再次感叹：曾几何时，render()必须且只能返回一个node
contextAPI - 就是说createContext之后，可以在一个component里提供provider，例外一个component里通过consumer来读取
祝：这个我基本上没用过 - 因为我要吗直接传props，或者用其他state管理，例如：redux或者mobx等。
createRef API - 这个在不受控制的form还是很有用的。受控制指通过react state来控制form的字。
新的lifecycles

getDerivedStateFromProps
getSnashotBeforeUpdate

注意：几个will的lifecycles，到V17后就没有life了。所以，大家有空还是看看上面两个新的lifecyles吧。

StrictMode - 用了发现下面几个潜在问题

Identifying components with unsafe lifecycles
Warning about legacy string ref API usage
Detecting unexpected side effects

React.memo - 用来替代PureComponent 或者 shouldComponentUpdate， memo让component变存，或者说只有props变才重新render。如只是父级component变了，memo子component不会重新render
React.lazy - 用来实现code-split - 基本是react loadable的复制版。

下面几个还没出：

Hooks - 让functional component 可以使用 state 通过 useState()
suspend
concurrent rendering

10和11 基本上是用了提供弱CPU和慢网速用户的用户体验。大概意思：hold住render，知道数据ready，这样对网速快的用户少了loading icon，对慢用户仍然有repsond。这个概念有点难，等真正开始用了，我们再深入！

梵

这个问题困扰我很久，每次我都要Google找答案，虽然每次都可以搞定，但是回头又忘记当时是怎么做的了。几天又上网搜了搜，就得这个一定是最佳方案了！记下，记下！

HTML

<!doctype html>
<html lang="en">

<head>
  <!-- head content -->
</head>

<body>
  <header>
    <!-- header content -->
    <h1>Hello header!</h1>
  </header>
  <main>
    <!-- page content -->
    <p>Hello main content!</p>
  </main>
  <footer>
    <!-- footer content -->
    <p>
      I like sitting at the bottom :-)</p>
  </footer>
</body>

CSS

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0 /** this is super important **/
}
footer {
  margin: auto auto 0 auto;
}

演示

https://codepen.io/adamcai/pen/YBXKMQ?editors=1100

梵

设置cognito有点麻烦，这篇文章介绍的很好！
https://aws.amazon.com/blogs/aws/launch-amazon-cognito-user-pools-general-availability-app-integration-and-federation/

梵

https://stackoverflow.com/questions/304837/javascript-user-selection-highlighting

梵

Promise (承诺) 函数用于实现callback的功能，即在一个函数结束后调用另外一个函数。
比如下面这个例子：

function do_thing1(){
  setTimeout( function(){
    console.log( 'do thing1' );
  }, 1000 );
}
 
function do_thing2(){
  console.log( 'do thing2' );
}
 
do_thing1();
do_thing2();

这里我们先调用do_thing1因为我们希望do_thing2在 do_thing1结束后再执行，但是do_thing2没有等！

我们可以用传统的callback来解决这个问题如下：

function do_thing1(callback){
  setTimeout( function(){
    console.log( 'do thing1' );
    callback && callback()
  }, 1000 );
}
 
function do_thing2(){
  console.log( 'do thing2' );
}
do_thing1(do_thing2);

我把do_thing2当做一个变量传给do_thing1，等do_thing1结束后来调用do_thing2。

接下来，我们用Promise来解决这个问题：

const do_thing1b = new Promise((resolve, reject) =>
  setTimeout(() => {
    console.log("do_thing1b");
    resolve("done");
  }, 1000)
);

const do_thing2b = () => {
  console.log("do thing2b");
};

do_thing1b.then(() => do_thing2b());

因为do_thing1b现在是个Promise，所以我们可以用then来串接其他函数，即do_thing2，这样就确保do_thing2b一定在do_thing1b结束后才被调用。这就"承诺"!

梵

用Mac快4年了，偶尔到PC上除了一点东西，我擦，那个慢啊！不比不知道，我们在Windows上浪费了多少时间！

梵总 发布的帖子

輕裝上陣

工具統一

項目下的ESlint安裝 （nextjs)

HTML

CSS

演示

梵总发布的帖子

項目下的ESlint安裝（nextjs)