dotenv

Dotenv is an open source, no dependencies NPM package. Its purpose is to avoid submitting your database connection to Github and making it public

In a development environment, you can create an.env configuration file in the root directory and write the environment variables for the database connection mode. In a production environment, you can configure the database connection mode by injecting the environment variables into the package. See the previous article for detailed configuration

However, companies with more sophisticated infrastructure that have their own git private deployments do not need this tool and can commit database connection configurations directly to Git

React Fast Refresh

what is react fast refresh

React Fast Refresh is a hot update solution officially supported by React Native. It was previously used in React Native. Because the underlying implementation is the same, it can also be used on the Web, but it needs to be integrated with existing tools such as WebPack (there are already plug-ins).

Fash Refresh is updated in real time, saves the state of a component (function component), and overwrites the error message on the screen when a program fails to compile

Dan’s reply: github.com/facebook/re…

how to use

To configure webPack plug-ins in the development environment: github.com/pmmmwh/reac…

Note that due to the limitations of the React Refresh pack, the React version must be greater than 16.9.0

compare with react-hot-loader

React Fast Refresh is an official hot refresh tool supported by React. The React-hot-Loader readME is recommended to move to Fast Refresh

Try it!

// webpack.config.js
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');  / / new

{
    test: /\.tsx? $/,
    use: [{
      loader: require.resolve('babel-loader'),
      options: {
        plugins: [require.resolve('react-refresh/babel')]  / / new}},'ts-loader'].exclude: /node_modules/,},plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new ReactRefreshWebpackPlugin(),   / / new].Copy the code

No valid possible cause

Reference: www.gatsbyjs.com/docs/refere…

  • Segmentfault.com/a/119000002…
  • www.gatsbyjs.com/docs/refere…