import React, { useState, useEffect } from 'react'

  const completionFunc = value => {
    if(String(value).length === 1) return `0${value}`
    return value
  }

  function Timer() {
    const [remainTime, setTime] = useState(null)

    useEffect(() => {
      const endTime = 1603165442000
      const time = endTime ? endTime > new Date().getTime() ? endTime - new Date().getTime() : 0 : 0
      const timer = setTimeout(() => {
        setTime(time)
      }, 1000)
      return () => {
        clearInterval(timer)
      }
    }, [remainTime])

    const remainHour = parseInt(remainTime / (60 * 60000)) || '00'
    const remainMinutes = parseInt((remainTime % (60 * 60000)) / 60000) || '00'
    const remainSeconds = parseInt((remainTime % 60000) / 1000) || '00'

    return (
      <h3>{completionFunc(remainHour)}:{completionFunc(remainMinutes)}:{completionFunc(remainSeconds)}</h3>
    )
  }

  export default Timer

  // 安装项目依赖
  npm install xxx -S
  npm install xxx --save
  npm install xxx

  // 安装开发依赖
  npm install xxx --dev
  npm install xxx -D

// 登录命令
ssh <username>@<hostname or IP address>

// root权限登录服务器
sudo ssh [email protected]

sudo yum install -y nginx git pm2

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

git clone git://github.com/creationix/nvm.git ~/nvm

echo "source ~/nvm/nvm.sh" >> ~/.bashrc
source ~/.bashrc

nvm list-remote

nvm install v12.16.3

nvm use v12.16.3

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh

// Ubuntu/Deepin安装脚本
wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh

// Debian安装脚本
wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && bash install.sh

// Fedora安装脚本
wget -O install.sh http://download.bt.cn/install/install_6.0.sh && bash install.sh

flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 1.22.6, on macOS 11.2.1 20D74 darwin-x64, locale zh-Hans-CN)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 12.4)
[✓] Android Studio (version 4.1)
[✓] VS Code (version 1.52.0)
[✓] Connected device (1 available)

• No issues found!

flutter create app

All done!
[✓] Flutter: is fully installed. (Channel stable, 1.22.6, on macOS 11.2.1 20D74 darwin-x64, locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices: is fully installed. (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS: is fully installed. (Xcode 12.4)
[✓] Android Studio: is fully installed. (version 4.1)
[✓] VS Code: is fully installed. (version 1.52.0)
[✓] Connected device: is fully installed. (1 available)

In order to run your application, type:

  $ cd app
  $ flutter run

Your application code is in app/lib/main.dart.

cd app
flutter run

Launching lib/main.dart on iPhone 12 Pro Max in debug mode...
 
Running Xcode build...                                                  
 └─Compiling, linking and signing...                        87.2s
Xcode build done.                                           114.1s
Waiting for iPhone 12 Pro Max to report its views...                 4ms
Syncing files to device iPhone 12 Pro Max...                       353ms

Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h Repeat this help message.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).
An Observatory debugger and profiler on iPhone 12 Pro Max is available at: http://127.0.0.1:55603/9Dz6pZ8WEDY=/

// 启动项目
flutter run

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.0
  english_words: ^3.1.5

// 根目录命令行运行下面命令
flutter pub get

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text(wordPair.asPascalCase),
        ),
      ),
    );
  }
}

Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h Repeat this help message.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).

Navigator.of(context).push(
  new MaterialPageRoute<void>(
    builder: (BuildContext context) {
      
    },
  ),
);

onTap: () {
  setState(() {
    if (alreadySaved) {
      _saved.remove(pair);
    } else {
      _saved.add(pair);
    }
  });
}

MaterialApp(
  title: 'Startup Name Generator',
  theme: new ThemeData(
    primaryColor: Colors.white,
  ),
  home: RandomWords(),
)

  npm: https://registry.npmjs.org/

  cnpm: https://r.cnpmjs.org/

  taobao: https://registry.npm.taobao.org/

  nj: https://registry.nodejitsu.com/

  rednpm: https://registry.mirror.cqupt.edu.cn/

  npmMirror: https://skimdb.npmjs.com/registry/

  deunpm: http://registry.enpmjs.org/

  npm config edit

  // 查看npm当前镜像源
  npm config get registry
  // 设置npm镜像源为淘宝镜像
  npm config set registry https://registry.npm.taobao.org/

  // 查看yarn当前镜像源
  config get registry
  // 设置yarn镜像源为淘宝镜像
  yarn config set registry https://registry.npm.taobao.org/

  npm install nrm -g

  nrm ls

  nrm use yarn

  nrm add yarn https://registry.yarnpkg.com/

  nrm del yarn

  nrm test yarn

// 安装
npm install download-git-repo

// 使用
const download = require('download-git-repo')

download('flippidippi/download-git-repo-fixture', 'test/tmp', function (err) {
  console.log(err ? 'Error' : 'Success')
})

'git clone' failed with status 128

// 正确的使用方式
download('direct:https://github.com/xccjk/app.git', 'app', { clone: true }, function (err) {
  console.log(err ? err : 'success')
})

  // app.js
  import React from 'react'
  import useVisibility from './visibilityChange'

  export default function App() {
    const videoElement = document.getElementById('video')
    // 直接调用即可
    useVisibility(videoElement)

    return (
      <div className='App'>
        <h1>visibilityChange api在react的使用</h1>
        <video
          autoplay
          loop
          id='video'
          src={
            'https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/The%2BVillage-Mobile.mp4'
          }
          controls='controls'
          width={500}
          height={300}
        />
      </div>
    );
  }

  // visibilityChange.js

  /**
  * 处理切换页面后视频暂停播放
  * @param {视频的ele} videoElement 
  */
  function useVisibility(videoElement) {
    var hidden, visibilityChange
    if (typeof document.hidden !== 'undefined') { // Opera 12.10 and Firefox 18 and later support 
      hidden = 'hidden'
      visibilityChange = 'visibilitychange'
    } else if (typeof document.msHidden !== 'undefined') {
      hidden = 'msHidden'
      visibilityChange = 'msvisibilitychange'
    } else if (typeof document.webkitHidden !== 'undefined') {
      hidden = 'webkitHidden'
      visibilityChange = 'webkitvisibilitychange'
    }

    const handleVisibilityChange = () => {
      if (document[hidden]) {
        videoElement && videoElement.pause()
      } else {
        videoElement && videoElement.play()
      }
    }

    if (typeof window.document.addEventListener === 'undefined' || typeof document[hidden] === 'undefined') {
      console.log('This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.')
    } else {
      // 处理页面可见属性的改变
      window.document.addEventListener(visibilityChange, handleVisibilityChange, false)

      // 当视频暂停，设置title
      // This shows the paused
      window.document.addEventListener('pause', function () {
        window.document.title = 'pause'
      }, false)

      // 当视频播放，设置title
      window.document.addEventListener('play', function () {
        window.document.title = 'play'
      }, false)
    }
  }

  export default useVisibility

   // 案例
   // 当数组长度比较长时，会比较耗时
   const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
   console.time('xcc')
   let body = document.body
   data.map(li => {
      body.appendChild(<p>{li}</p>)
   })
   console.timeEnd('xcc')

   // good
   const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
   console.time('xcc')
   let body = document.body
   let str = ''
   data.map(li => {
      str += <p>{li}</p>
   })
   body.appendChild(str)
   console.timeEnd('xcc')

   // bad
   const len = 1000
   console.time('bad')
   for(let i = 0; i < len; i++) {
      document.body === 1 ? console.log(i) : null
   }
   console.timeEnd('bad')

   // good
   const len = 1000
   console.time('good')
   const body = JSON.stringify(document.body)
   for(let i = 0; i < len; i++) {
      body === 1 ? console.log(i) : null
   }
   console.timeEnd('good')

   // bad
   console.time('bad')
   const ul = document.createElement('ul')
   for(let i = 0; i < 1000; i++) {
      ul.appendChild(<li>{i}</li>)
   }
   console.timeEnd('bad')

   // good
   console.time('good')
   const ul = document.createElement('ul')
   let str = ''
   for(let i = 0; i < 1000; i++) {
      str += `<li>{i}</li>`
   }
   ul.appendChild(str)
   console.timeEnd('good')

   // bad
   for(let i = 0; i < document.querySelectorAll('div').length; i++) {
      document.querySelectorAll(`div`)[i].innerText = i
   }

   // good
   const divs = document.querySelectorAll('div')
   for (let i = 0; i < divs.length; i++) {
      divs[i].innerText = i
   }

  // 生成github秘钥
  ssh-keygen -t rsa -C 'github登录的邮箱' -f ~/.ssh/id_rsa_github
  // -t指定秘钥类型，默认rsa
  // -C 设置注释文字，比如邮箱
  // -f 指定秘钥文件名称
  // 按enter，不输入用户名与密码
  // 会生成文件名为id_rsa_github与id_rsa_github.pub两个文件

  // 同理生成gitlab秘钥
  ssh-keygen -t rsa -C 'gitlab登录的邮箱' -f ~/.ssh/id_rsa_gitlab
  // 会生成文件名为id_rsa_gitlab与id_rsa_gitlab.pub两个文件

  // 进入.ssh文件
  cd ~/.ssh
  // 给config文件添加权限，不然在vim文件保存时会提示权限不足
  // 错误提示
  // .ssh/config" E212: Can't open file for writing
  // Press ENTER or type command to continue
  sudo touch config
  sudo chown root:root config
  sudo chmod 755 config
  whoami
  vim config
  // 在config文件中输入下面内容，注意文件名id_rsa_gitlab与id_rsa_github写为自己的文件名
  #gitlab
  Host gitlab
        HostName gitlab.*.com
        PreferredAuthentications publickey
        IdentityFile ~/.ssh/id_rsa_gitlab

  #github
  Host github
          AddKeysToAgent yes
          UseKeychain yes
          HostName github.com
          PreferredAuthentications publickey
          IdentityFile ~/.ssh/id_rsa_github
  // 输入结束后按esc，退出vim编辑模式，按i进入vim编辑模式
  // 输入shift+:，然后输入wq，保存并退出vim

  // 代码1
  redirectWXAuth = () => {
    const { goToPage } = this.state
    const redirectUrl = encodeURIComponent(
      `${process.env.REDIRECT_HOST}/login?goto_page=${encodeURIComponent(goToPage)}&bindCode=1`
    )
    const wechatAuthUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${process.env.WXAPPID}&redirect_uri=${redirectUrl}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
    window.location.replace(wechatAuthUrl)
  }

  // 代码2
  // 重定向前
  https://h5.abc.com/?v=1592878502327#/home
  // 经过重定向后
  https://h5.abc.com/?v=1592878502327#

  // 处理方式 - 对要重定向地址中的#剪切
  redirectWXAuth = () => {
    const { goToPage } = this.state
    const url = (goToPage + '').replace('#', '')
    const redirectUrl = encodeURIComponent(
      `${process.env.REDIRECT_HOST}/login?goto_page=${encodeURIComponent(url)}&bindCode=1`
    )
    const wechatAuthUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${process.env.WXAPPID}&redirect_uri=${redirectUrl}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
    window.location.replace(wechatAuthUrl)
  }
  // 处理方式2 - 不使用hash模式路由，由后端配置nginx来解决路由跳转

  redirectWXAuth = () => {
    const { goToPage } = this.state
    const url = (goToPage + '').replace('#', '')
    const redirectUrl = encodeURIComponent(
      `${process.env.REDIRECT_HOST}/login?goto_page=${encodeURIComponent(url)}&bindCode=1`
    )
    const wechatAuthUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${process.env.WXAPPID}&redirect_uri=${redirectUrl}&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect`
    window.location.replace(wechatAuthUrl)
  }

HTTP协议(超文本传输协议)是浏览器端与服务端之间最主要的通信协议

  1991年出现，作用是用来传输超文本内容HTML

  为客户端发起请求，服务端响应请求的通信方式: 客户端 -> GET/index.html -> 服务端 -> <html>...</html> -> 客户端

  只能用来传输文本内容，随着新技术的发展，浏览器希望通过HTTP来传输基本，样式，图片，音视频等其他类型文件

  1996年出现
  1. 新增头部设定，头部内容以键值对的形式设置
  2. 请求头部通过Accept字段来告诉服务端可以接收的请求的文件类型
  3. 响应头部通过Content-Type字段来告诉浏览器返回的文件类型
  4. 很多其他功能也可以依靠头部字段实现，比如缓存，认证

  客户端 -> GET/index.html HTTP/1.0 accept:text/css -> 服务端 -> HTTP/1.0 200 OK Content-type: text/css... -> 客户端

  在HTTP/1.0中，每进行一次通信，都需要建立连接、数据传输、断开连接三个阶段，在连接过多时，不停的建立连接和断开连接会增大网络开销

  1999年出现，解决了连接问题，及重复的创建和断开网络连接，增加了一个创建持久连接的方法，主要实现为一个连接传输完成时，并不是马上进行关闭，而是继续复用它传输其他的请求数据，这个连接保持到浏览器或者服务器端断开连接为止

  客户端 -> GET/index.html HTTP/1.0 accept:text/css -> 服务端 -> HTTP/1.0 200 OK Content-type: text/css... -> 客户端 -> 下一次请求 GET/index.html HTTP/1.0 accept:text/css -> 服务端 -> HTTP/1.0 200 OK Content-type: text/css... -> ... ->客户端

  因为HTTP是基于TCP实现的，TCP建立连接以及断开的过程，也就是常常说的'三次握手'和'四次挥手'

  虽然通过长连接减少了大量创建/断开连接造成的性能损耗，但是它的并发能力受到限制，所以传输性能还有很大的提升空间

  // 代码1
  if(true) {
    var a = 10
  }
  console.log(a)  // 10
  等价于
  var a = undefined
  if(true) {
    a = 10
  }
  console.log(a)

  // 代码2
  if(false) {
    var b = 20
  }
  console.log(b)  // undefined
  等价于
  var b = undefined
  if(true) {
    b = 10
  }
  console.log(b)

  // 代码3
  var a = 10
  console.log(window.a) // 10

  // 代码4 - const同理
  if(true) {
    let a = 10
  }
  console.log(a)  // a is not defined

  // 代码5 - const同理
  var a = 10
  let a = 20  // Identifier 'a' has already been declared

  // 代码6
  console.log(a)  // Identifier 'a' has already been declared
  let a = 10

  // 代码7 - const同理
  let a = 10
  console.log(window.a) // undefined

  // 代码8 - const同理
  let a = 10
  a = 20
  console.log(a)  // 20

  // 代码9
  const a = 10
  a = 20  // Identifier 'a' has already been declared

  // 代码10
  const a = []
  a.push(1)
  console.log(a)  // [1]

  const obj = { a: 1 }
  obj.a = 2
  console.log(obj)  // { a: 2 }

  // 代码11
  var a = 10

  {
    console.log(a)  // Cannot access 'a' before initialization
    
    let a = 20
  }

  var a = 10

  {
    console.log(a)  // 10
    
    var a = 20
  }

  // 代码12
  var a = 10
  (function() {
    console.log(a)  // a is not defined
    const a = 20
  })()

  // 代码13
  var a = []
  for(var i = 0; i < 10; i++) {
    a[i] = function() {
      console.log(i)  
    }
  }
  a[0]()  // 10
  a[1]()  // 10

  // 代码14
  var a = []
  for(var i = 0; i < 10; i++) {
    a[i] = (function(i) {
      return function() {
        console.log(i)
      }
    }(i))
  }
  a[0]()  // 0
  a[1]()  // 1

  // 代码15
  var a = []
  for(let i = 0; i < 10; i++) {
    a[i] = function() {
      console.log(i)  
    }
  }
  a[0]()  // 0
  a[1]()  // 1

  // 代码16
  for(let i = 0; i < 10; i++) {
    let i = 'a'
    console.log(i)  // a ... a
  }

  // 代码17
  for(var i = 0; i < 10; i++) {
    let i = 'a'
    console.log(i)  // a ... a
  }

  // 代码18
  // console出一个值后就终止了
  for(var i = 0; i < 10; i++) {
    var i = 'a'
    console.log(i)  // a
  }
  等价于
  var i = 0
  for(i < 10; i++) {
    i = 'a'
    console.log(a)
  }
  执行完一次后
  var i = 'a'
  'a'++ => NaN

  // 代码19
  // 变量重复定义
  for(const i = 0; i < 10; i++) {
    console.log(i)  // Assignment to constant variable.
  }

  // 代码20
  const a = [], obj = { a: 1, b: 2, c: 3 }
  for(var key in object) {
    a.push(function() {
      console.log(key)
    })
  }
  a[0]()  // c

  // 代码21
  var a = [], obj = { a: 1, b: 2, c: 3 }
  for(let key in obj) {
    a.push(function() {
      console.log(key)
    })
  }
  a[0]()  // a

  // 代码22
  var a = [], obj = { a: 1, b: 2, c: 3 }
  for(const key in obj) {
    a.push(function() {
      console.log(key)
    })
  }
  a[0]()  // a

  import React from 'react'

  function HOC(WrapComponent) {
    function ChildComponent(props) {
      const add = (a, b) => {
        return a + b
      }
      const newProps = { type: 'hoc', add }
      return <WrapComponent {...props} {...newProps} />
    }
    return ChildComponent
  }

  // @HOC
  function HocComponent(props) {
    console.log(props) // { type: 'hoc', add: f(){} }
    const { add } = props
    console.log(add(1, 2))
    return (
      <div>HocPage</div>
    )
  }

  const newHocComponent = HOC(HocComponent)

  export default newHocComponent

import React, { Component } from 'react';
  import { WebView, View, StyleSheet, Platform } from 'react-native';
  import renderChart from './renderChart';
  import echarts from './echarts.min';

  export default class App extends Component {

    constructor(props) {
      super(props);
    }
    

    // 预防过渡渲染
    shouldComponentUpdate(nextProps, nextState) {
      const thisProps = this.props || {}
      nextProps = nextProps || {}
      if (Object.keys(thisProps).length !== Object.keys(nextProps).length) {
        return true
      }
      for (const key in nextProps) {
        if (JSON.stringify(thisProps[key]) != JSON.stringify(nextProps[key])) {
          // console.log('props', key, thisProps[key], nextProps[key])
          return true
        }
      }
      return false
    }

    componentWillReceiveProps(nextProps) {
      if (nextProps.option !== this.props.option) {
        // 解决数据改变时页面闪烁的问题
        this.refs.chart.injectJavaScript(renderChart(nextProps))
      }
    }

    render() {
      return (
        <View style={{flex: 1, height: this.props.height || 400,}}>
          <WebView
            ref="chart"
            scrollEnabled = {false}
            injectedJavaScript = {renderChart(this.props)}
            style={{
              height: this.props.height || 400,
              backgroundColor: this.props.backgroundColor || 'transparent'
            }}
            scalesPageToFit={Platform.OS !== 'ios'}
            originWhitelist={['*']}
            source={{uri: 'file:///android_asset/tpl.html'}}
            onMessage={event => this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}
          />
        </View>
      );
    }
  }

com.android.build.api.transform.TransformException: com.android.builder.dexing.DexArchiveBuilderException: com.android.builder.dexing.DexArchiveBuilderException: Failed to process /Users/xxx/.gradle/caches/modules-2/files-2.1/com.umeng.analytics/analytics/6.1.4/c1d30c2bbdce435b775cadca57df2098044a0f5e/analytics-6.1.4.jar

dependencies {
    // 代表src目录同级libs目录全部解析
    implementation fileTree(include: ['*.jar'], dir: 'libs')
    // implementation files('libs/umeng-analytics-8.0.0.jar')
    // implementation files('libs/umeng-common-2.0.0.jar')
    // implementation 'com.umeng.analytics:analytics:latest.integration'
    // implementation 'com.umeng.analytics:analytics:6.1.4'
    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
    implementation 'com.facebook.react:react-native:+'
}

  // 代码1
  // 每次value改变，就会发出一次请求
  <input onChange={handleChange} />

  const handleChange = async ({target: { value }}) => {
    const res = await search({ keyword: value })
  }

  // 代码2
  // 通过定时器。设置时间间隔500ms执行一次请求
  <input onChange={handleChange} />

  let timer = null
  const handleChange = ({target: { value }}) => {
    if(timer) {
      clearTimeout(timer)
      timer = null
    }
    timer = setTimeout(async () => {
      const res = await search({ keyword: value })
    }, 500)
  }

  // 代码3
  // 公共函数抽取
  /*
    应有的功能
    1. 参数和返回值如何传递？
    2. 防抖之后函数是否可以立即执行？
    3. 防抖的函数是否可以取消？
  */

  const debounce = (func, wait = 0) => {
    let timer = null
    let args
    function debounced(...age) {
      args = arg
      if(timer) {
        clearTimeout(timer)
        timer = null
      }

      // 以promise形式返回函数执行结果
      return new Promise((res, rej) => {
        timer = setTimeout(async () => {
          try {
            const result = await func.apply(this, args)
            res(result)
          } catch (e) {
            rej(e)
          }
        }, wait)
      })
    }
    // 取消方法
    function cancel() {
      clearTimeout(timer)
      timer = null
    }
    // 立即执行
    function fulsh() {
      cancel()
      return func.apply(this, args)
    }
    debounced.cancel = cancel
    debounced.flush = flush
    return debounced
  }

  <ul class='list'>
    <li class='item'>item1<span class='edit'>编辑</span><span class='delete'>删除</span></li>
    <li class='item'>item1<span class='edit'>编辑</span><span class='delete'>删除</span></li>
    <li class='item'>item1<span class='edit'>编辑</span><span class='delete'>删除</span></li>
    ...
  </ul>

  const ul = document.querySelector('.list')
  ul.addEventListener('click', e => {
    const t = e.target || e.srcElement
    if (t.classList.contains('item')) {
      // 接口请求处理业务逻辑
    } else {
      id = t.parentElement.id
      if (t.classList.contains('edit')) {
        edit(id)
      } else if (t.classList.contains('delete')) {
        del(id)
      }
    }
  })

  "webpack": "^5.10.3",
  "webpack-cli": "^4.2.0",
  "webpack-dev-server": "^3.11.0"

  // .babelrc.js
  module.exports = {
    presets: [
      [
        '@babel/preset-env',
        {
          targets: {
            browsers: ['> 5%', 'IE 10', 'iOS 7', 'Firefox > 20']
          },
          useBuiltIns: 'usage',
          corejs: 3
        }
      ],
      '@babel/preset-react'
    ],
    plugins: [
      '@babel/plugin-transform-runtime',
      '@babel/plugin-proposal-class-properties',
      [
        'import',
        {
          libraryName: 'antd',
          libraryDirectory: 'es'
        }
      ]
    ]
  }

  // package.json
  // webpack4.x
  "script": {
    "dev": "webpack-dev-server ...",
  }
  // webpack5.x
  "script": {
    "dev": "webpack serve ...",
  }
  // 降版本
  {
    [email protected]
  }

  // webpack.config.js

  // webpack4.x
  module.exports = {
    ...
    plugins: [
      ...
      new webpack.NamedModulesPlugin()
    ]
  }

  // webpack5.x
  // 在webpack5.x中，webpack.NamedModulesPlugin的功能已经内置

Module not found: Error: Can't resolve './superPropBase' in '/Users/xxx/node_modules/@babel/runtime/helpers/esm'
Did you mean 'superPropBase.js'?
BREAKING CHANGE: The request './superPropBase' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request

  npm install @babel/[email protected] -D

  // webpack.config.js
  module.exports = {
    ...
    resolve: {
      // https://github.com/babel/babel/issues/8462
      // https://blog.csdn.net/qq_39807732/article/details/110089893
      // 如果确认需要node polyfill，设置resolve.fallback安装对应的依赖
      fallback: {
        crypto: require.resolve('crypto-browserify'),
        path: require.resolve('path-browserify'),
        url: require.resolve('url'),
        buffer: require.resolve('buffer/'),
        util: require.resolve('util/'),
        stream: require.resolve('stream-browserify/'),
        vm: require.resolve('vm-browserify')
      },
      // 如果确认不需要node polyfill，设置resolve.alias设置为false
      alias: {
        crypto: false
      }
    }
  }

  npm run html-webpack-plugin@next -D

  // 官方提供的解决方式，修改webpack-cli版本到4.2.0既可
  npm install [email protected] --save-dev

  "webpack": "^5.10.3",
  "webpack-cli": "^4.2.0",
  "webpack-dev-server": "^3.11.0"

  // 4.x版本
  {
    "webpack-merge": "^4.2.2"
  }
  // webpack.config.js
  const merge = require('webpack-merge')
  const defaultConfig = require('../...')
  const config = merge(defaultConfig, {

  })
  export default config

  // 5.x版本
  {
    "webpack-merge": "^5.7.0"
  }
  const webpackMerge = require('webpack-merge')
  const defaultConfig = require('../...')
  const config = webpackMerge.merge(defaultConfig, {

  })
  export default config

  // webpack.config.js
  // webpack4.x
  const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
  module.exports = {
    ...
    piugins: [
      new HardSourceWebpackPlugin({
        environmentHash: {
          root: process.cwd(),
          directories: [],
          files: ['package-lock.json', 'yarn.lock'],
        },
        cachePrune: {
          maxAge: 2 * 24 * 60 * 60 * 1000,
          sizeThreshold: 50 * 1024 * 1024
        }
      })
    ]
  }
  // webpack5.x
  // https://github.com/mzgoddard/hard-source-webpack-plugin/issues/461
  const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
  module.exports = {
    ...
    piugins: [
      new HardSourceWebpackPlugin(),
      new HardSourceWebpackPlugin.ExcludeModulePlugin([])
    ]
  }

  // 1.js
  console.log(a)

  // webpack.config.basic.js
  module.exports = {
    entry: './src/1.js',
    mode: 'development'
  }

  // package.json
  script: {
    ...
    "build:basic": "webpack --config webpack.config.basic.js"
  }

  // webpack.config.watch.js
  module.exports = {
    entry: './src/1.js',
    mode: 'development',
    watch: true
  }

  // package.json
  "build:watch": "webpack --config webpack.config.watch.js"

  // webpack.config.reload.js
  module.exports = {
    entry: './src/1.js',
    mode: 'development',
    watch: true,
    devServer: {
      // 为dist下静态文件提供本地服务渲染
      contentBase: './dist',
      open: true
    }
  }

  // package.json
  script: {
    ...
    "dev:reload": "webpack-dev-server --config webpack.config.reload.js"
  }

  // 1.js
  import './style.css'
  ...

  // style.css
  div {
    color: red
  }

  // webpack.config.hmr.js
  // 添加devServer hot与css解析器style-loader与css-loader
  module.exports = {
    entry: './src/index-0.js',
    mode: 'none',
    watch: true,
    devServer: {
      // 为dist下静态文件提供本地服务渲染
      contentBase: './dist',
      open: true,
      hot: true
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        }
      ]
    }
  }

  package.json
  script: {
    ...
    "dev:hmr": "webpack-dev-server --config webpack.config.hmr.js"
  }

岗位职责：
1.负责xx产品线Web前端的开发和维护工作；
2.参与产品的讨论和UI设计，配合UI团队设计系统交互的流程，实现UI效果；
3.协助团队改进框架、优化前端性能。

岗位要求：
1.本科及以上学历，3年以上前端开发经验；
2.精通JavaScript, HTML, CSS, Ajax, jQuery, Bootstrap, SASS/LESS等前端开发技术；
3.精通Vue, React, Angular, Backbone, 或其它前端MVC框架中的一种或几种；
4.学习能力强，热衷技术，喜欢钻研, 有github或个人技术blog者优先；
5.有前端自动化测试, 单元测试方面经验者优先；
6.具备良好的沟通和团队协作能力，工作积极主动，思路清晰，责任心强

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

cd ~/development

unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip

export PATH=`pwd`/flutter/bin:$PATH

Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    ✗ Android licenses not accepted.  To resolve this, run: flutter doctor
      --android-licenses
[✗] Xcode - develop for iOS and macOS
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS
      development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
        sudo xcodebuild -runFirstLaunch
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install:
        sudo gem install cocoapods
[!] Android Studio (version 4.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.52.0)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
sudo gem install cocoapods

// 注意AndroidStudio版本号
ln -s ~/Library/Application\ Support/Google/AndroidStudio4.1/plugins ~/Library/Application\ Support/AndroidStudio4.1

echo $PATH
// 可以看到flutter的路径为
/Users/name/development/flutter/bin:

open ~/.bash_profile

vim ~/.bash_profile

// 创建bash_profile文件
touch .bash_profile

// 添加国内镜像
export PUB_HOSTED_URL="https://pub.flutter-io.cn"
export FLUTTER_STORAGE_BASE_URL="https://storage.flutter-io.cn"
// 添加安装路径，上面获取到的
export PATH="/Users/name/development/flutter/bin:$PATH"

source ~/.bash_profile

// .bash_profile
# HomeBrew
export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.ustc.edu.cn/homebrew-bottles
export PATH="/usr/local/bin:$PATH"
export PATH="/usr/local/sbin:$PATH"
export PUB_HOSTED_URL="https://pub.flutter-io.cn"
export FLUTTER_STORAGE_BASE_URL="https://storage.flutter-io.cn"
# name为自己电脑的名称
export PATH="/Users/name/development/flutter/bin:$PATH"
source ~/.bashrc
# HomeBrew END

  npm install xcc-standard-eslint eslint-plugin-react eslint

  npm install xcc-standard-prettier

  npm install xcc-standard-stylelint

  npm install xcc-commitlint husky lint-staged

  npm install conventional-changelog-cli

  npm install xcc-standard-eslint eslint-plugin-react eslint

  // ts中常用配置方式
  const { getEslint } = require('xcc-standard-eslint')

  module.exports = {
    ...getEslint({
      ignorePatterns: ['.dll', 'build', '.temp'],
      useTs: true,
      // 需要覆盖默认的配置规则，在有些老项目中可能为了维持稳定，不改变之前的逻辑，就需要兼容之前的语法规则
      rules: {
        'comma-dangle': 'off',
        'function-paren-newline': 'off',
        'global-require': 'off',
        'import/no-dynamic-require': 'off',
        'no-inner-declarations': 'off',
        'class-methods-use-this': 'off',
        'import/extensions': 'off',
        'import/prefer-default-export': 'off',
        '@typescript-eslint/explicit-function-return-type': 'off',
        '@typescript-eslint/no-var-requires': 'off',
        /**
        * 0: 禁止规则
        * 1: 警告
        * 2: 必须
        */
        // render不规范
        'react/display-name': 'off',
        // 变量名不正确，比如 style_id
        '@typescript-eslint/camelcase': 'off',
        // 允许any
        '@typescript-eslint/no-explicit-any': 'off',
        'react/prop-types': 'off',
        // 空函数
        '@typescript-eslint/no-empty-function': 0,
        // 函数先后顺序
        '@typescript-eslint/no-use-before-define': 'off',
        // return null
        '@typescript-eslint/ban-ts-ignore': 'off',

        'require-atomic-updates': 'off',
        '@typescript-eslint/triple-slash-reference': 'off',
        // 未使用变量
        '@typescript-eslint/no-unused-vars': 0,
        // 数组统一空格 [1, 2, 3, ...]
        'array-bracket-spacing': 2,
        // prettier 中默认函数名不加空格，类似 function add() {}，而eslint中默认为function add () {}
        'space-before-function-paren': 0
      }
    })
  }

  // 在js中的常用配置方式
  const { getEslint } = require('xcc-standard-eslint')

  module.exports = {
    ...getEslint({
      ignorePatterns: ['.dll', 'build', '.temp'],
      useTs: false,
      rules: {
        'comma-dangle': 'off',
        'function-paren-newline': 'off',
        'global-require': 'off',
        'import/no-dynamic-require': 'off',
        'no-inner-declarations': 'off',
        // New rules
        'class-methods-use-this': 'off',
        'import/extensions': 'off',
        'import/prefer-default-export': 'off',
        // render不规范
        'react/display-name': 'off',
        'react/prop-types': 'off',
        'require-atomic-updates': 'off',
        // 数组统一空格 [1, 2, 3, ...]
        'array-bracket-spacing': 2,
        // prettier 中默认函数名不加空格，类似 function add() {}，而eslint中默认为function add () {}
        'space-before-function-paren': 0
      }
    })
  }

  dist
  build
  config
  scripts
  node_modules
  public
  .babelrc
  !.*.js
  publish.js
  server.js
  version.js
  tsconfig.json
  package.json

  npm install xcc-standard-prettier

  const { getPrettier } = require('xcc-standard-prettier')

  module.exports = {
    ...getPrettier()
  }

  .dll
  build/
  .temp
  node_modules
  .vscode

  npm install xcc-standard-stylelint

  const { getStyleLint } = require('xcc-standard-stylelint')

  module.exports = {
    ...getStyleLint({
      rules: {
        // 字体文件相关
        'font-family-no-missing-generic-family-keyword': null,
        // 空的样式文件
        'no-empty-source': null,
        // 计算属性 calc()
        'function-calc-no-invalid': null
      }
    })
  }

  npm install xcc-commitlint husky lint-staged

  const { getCommitLint } = require('xcc-commitlint')

  module.exports = {
    ...getCommitLint()
  }

  root = true

  [*]
  charset = utf-8
  end_of_line = lf
  indent_style = space
  indent_size = 2
  trim_trailing_whitespace = true
  insert_final_newline = true

  {
    "editor.formatOnSave": true
  }

  // setting.json部分相关配置
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript|react]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript|react]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "editor.formatOnType": true,
  // 设置默认使用本地配置文件规则
  "prettier.configPath": ".prettierrc.js",
  "stylelint.config": ".stylelintrc.js",
  "[jsonc]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

  "script": {
    ...
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx --quiet",
    "lint-fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
    "lint:style": "stylelint 'src/**/*.less' --syntax less",
    "lint-fix:style": "npm run lint:style -- --fix",
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -w -r 0",
    "changelog:create": "npm run changelog -- -s -r 0"
  }

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ]
  },

  // 安装changelog包
  npm install conventional-changelog-cli

react-native ram-bundle --entry-file index.js --platform android --dev false --bundle-output ./android/app/src/main/assets/index.android.bundle --assets-dest ./android/app/src/main/res/

cd android && ./gradlew assembleRelease

doLast {
    def moveFunc = { resSuffix ->
        File originalDir = file("$buildDir/generated/res/react/release/drawable-${resSuffix}");
        if (originalDir.exists()) {
            File destDir = file("$buildDir/../src/main/res/drawable-${resSuffix}");
            ant.move(file: originalDir, tofile: destDir);
        }
    }
    moveFunc.curry("ldpi").call()
    moveFunc.curry("mdpi").call()
    moveFunc.curry("hdpi").call()
    moveFunc.curry("xhdpi").call()
    moveFunc.curry("xxhdpi").call()
    moveFunc.curry("xxxhdpi").call()
}

function getAndroidAssetSuffix(scale: number): string {
  switch (scale) {
    case 0.75: return 'ldpi-v4';
    case 1: return 'mdpi-v4';
    case 1.5: return 'hdpi-v4';
    case 2: return 'xhdpi-v4';
    case 3: return 'xxhdpi-v4';
    case 4: return 'xxxhdpi-v4';
  }
  throw new Error('no such scale');
}

cd app/webpack-xcc
npm install app/npm-link-test

cd app/webpack-xcc/node_modules
ln -s app/npm-link-test npm-link-test

npm link

npm link name

npm unlink name

  // 代码1
  // svg
  // svg直接写入HTML
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title></title>
  </head>
  <body>
      <svg xmlns="http://www.w3.org/2000/svg"   width="200" height="200">
          <circle cx="50" cy="50" r="50" />
      </svg>
  </body>
  </html>

  // svg写入独立文件引入HTML
  <img src='[name].svg' alt='' />

  // 代码2
  // Base64
  // url地址
  https://user-gold-cdn.xitu.io/2018/9/15/165db7e94699824b?w=22&h=22&f=png&s=3680

  // 引入img
  <img src="https://user-gold-cdn.xitu.io/2018/9/15/165db7e94699824b?w=22&h=22&f=png&s=3680">

  // base64编码
  data:image/png;base64,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

  // 代码3
  // chrome 支持WebP
  <img src="//img.alicdn.com/tps/i4/TB1CKSgIpXXXXccXXXX07tlTXXX-200-200.png_60x60.jpg_.webp" alt="手机app - 聚划算" class="app-icon">

  // safari 不支持WebP
  <img src="//img.alicdn.com/tps/i4/TB1CKSgIpXXXXccXXXX07tlTXXX-200-200.png_60x60.jpg" alt="手机app - 聚划算" class="app-icon">

import React, { memo, useCallback, useState } from 'react'

function PageA (props) {
  const { onClick, children } = props
  console.log(111, props)
  return <div onClick={onClick}>{children}</div>
}

function PageB ({ onClick, name }) {
  console.log(222)
  return <div onClick={onClick}>{name}</div>
}

function UseCallback() {
  const [a, setA] = useState(0)
  const [b, setB] = useState(0)

  const handleClick1 = () => {
    setA(a + 1)
  }

  const handleClick2 =() => {
    setB(b + 1)
  }

  return (
    <>
      <PageA onClick={handleClick1}>{a}</PageA>
      <PageB onClick={handleClick2} name={b} />
    </>
  )
}

export default UseCallback

import React, { memo, useCallback, useState } from 'react'

function PageA (props) {
  const { onClick, children } = props
  console.log(111, props)
  return <div onClick={onClick}>{children}</div>
}

function PageB ({ onClick, name }) {
  console.log(222)
  return <div onClick={onClick}>{name}</div>
}

const PageC = memo(PageB)

function UseCallback() {
  const [a, setA] = useState(0)
  const [b, setB] = useState(0)

  const handleClick1 = () => {
    setA(a + 1)
  }

  const handleClick2 = useCallback(() => {
    setB(b + 1)
  }, [b])

  return (
    <>
      <PageA onClick={handleClick1}>{a}</PageA>
      <PageC onClick={handleClick2} name={b} />
    </>
  )
}

export default UseCallback

  # GitHub Start 
  192.30.253.112    Build software better, together 
  192.30.253.119    gist.github.com
  151.101.184.133    assets-cdn.github.com
  151.101.184.133    raw.githubusercontent.com
  151.101.184.133    gist.githubusercontent.com
  151.101.184.133    cloud.githubusercontent.com
  151.101.184.133    camo.githubusercontent.com
  151.101.184.133    avatars0.githubusercontent.com
  151.101.184.133    avatars1.githubusercontent.com
  151.101.184.133    avatars2.githubusercontent.com
  151.101.184.133    avatars3.githubusercontent.com
  151.101.184.133    avatars4.githubusercontent.com
  151.101.184.133    avatars5.githubusercontent.com
  151.101.184.133    avatars6.githubusercontent.com
  151.101.184.133    avatars7.githubusercontent.com
  151.101.184.133    avatars8.githubusercontent.com
  # GitHub End

  // bad
  function filter(type) {
    if (type === 1 || type === 2 || type === 3 || type === 4 || ...) {
      console.log('条件成立了...')
    }
  }
  // good
  const types = [1, 2, 3, 4, ...]
  function filter(type) {
    if (types.includes(type)) {
      console.log('条件成立了...')
    }
  }

  const data = [
    { name: 'a', age: 20 },
    { name: 'b', age: 28 },
    { name: 'c', age: 18 }
  ]
  // bad
  function filter(n) {
    let isAll = true
    data.forEach(({ age }) => {
      if (age > n) {
        isAll = false
      }
    })
    return isAll
  }
  // bad
  function filter(n) {
    const o = data.find(x => x.age > n)
    return o ? true : false
  }
  // good
  function filter(n) {
    return data.every(x => x.age > n)
  }

  const data = [
    { name: 'a', age: 20 },
    { name: 'b', age: 28 },
    { name: 'c', age: 18 }
  ]
  // bad
  let isAge = false
  data.forEach(({ age }) => {
    if (age > 25) {
      isAge = true
    }
  })
  // good
  const isAge = data.some(({ age }) => age > 25)

  const data = [
    { name: 'a', age: 20 },
    { name: 'b', age: 28 },
    { name: 'c', age: 18 }
  ]
  // bad
  const { name, age } = data.filter(({ age }) => age > 25)[0] || {}
  // good
  const { name, age } = data.find(({ age }) => age > 25) || {}

  // bad
  function f(m) {
    return m || 1
  }
  // good
  function f(m = 1) {
    return m
  }

  const obj = { a: { b: { c: 1 } } }
  // bad
  const { a = {} } = obj
  const { b = {} } = a
  const { c } = b
  // good
  // 需要配置babel
  const m = a?.b?.c
  // bad
  <div>
    {
      (this.props.data || []).map(li => <span>{li}</span>)
    }
  </div>
  // good
  <div>
    {
      this.props?.data?.map(li => <span>{li}</span>)
    }
  </div>

  // bad
  function pick(type) {
    if (type === 1) {
      return [0, 1]
    } else if (type === 2) {
      return [0, 1, 2]
    } else if (type === 3) {
      return [0, 3]
    } else {
      return []
    }
  }
  // bad
  function pick(type) {
    switch (type) {
      case 1:
        return [0, 1]
      case 2:
        return [0, 1, 2]
      case 3:
        return [0, 3]
      default:
        return []
    }
  }
  // good
  // 枚举法
  const fn = {
    1: [0, 1],
    2: [0, 1, 2],
    3: [0, 3]
  }
  const filter = fn[type] ?? []
  // good
  // map数据结构
  const fn = new Map()
    .set('1', [0, 1])
    .set('2', [0, 1, 2])
    .set('3', [0, 3])
  const filter = fn[type] ?? []

  // bad
  return (
    <>
      {
        isCheck ? (
          <div>check all</div>
        ) : null
      }
    </div>
  )
  // good
  if (!isCheck) return null
  return <div>check all</div>

  // bad
  function sum(num) {
    return +num + 1
  }
  // bad
  function sum(num) {
    return Number(num) + 1
  }
  sum('1.1')  // 2.1
  sum('1.1abc') // NaN
  // good
  function sum(num) {
    return ~~num + 1
  }
  sum('1.1')  // 2.1
  sum('1.1abc') // 1

  // bad
  function async fetchData() {
    const res = await getData({})
    const { success, response = [] } = res || {}
    if (success) {
      setData(response)
    }
  }
  // good
  function async fetchData() {
    try {
      const res = await getData({}) ?? []
      const { success, response = [] } = res
      if (success) {
        setData(response)
      }
    } catch (err) {
      console.log('error', const res = await getData({}))
    }
  }

  // 代码1
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }

  // 代码2
  loader: 'babel-loader?cacheDirectory=true'

  // 代码3 - dll配置文件
  const path = require('path')
  const webpack = require('webpack')

  module.exports = {
    entry: {
      // 依赖的库的数组
      verdor: [
        'prop-types',
        'babel-polyfill',
        'react',
        'react-dom',
        'react-router-dom'
      ]
    },
    output: {
      path: path.join(__dirname, 'dist'),
      filename: '[name].js',
      library: '[name]_[hash].js'
    },
    plugins: [
      new webpack.DllPlugin({
        // DllPlugin的name属性需要和libary保持一致
        name: '[name]_[hash]',
        path: path.join(__dirname, 'dist', '[name]-manifest.json'),
        // context需要和webpack.config.js保持一致
        context: __dirname
      })
    ]
  }

  // webpack.config.js
  const path = require('path')
  const webpack = require('webpack')

  module.exports = {
    mode: 'production',
    entry: {
      main: './src/index.js'
    },
    output: {
      path: path.join(__dirname, 'dist/'),
      filename: '[name],js'
    },
    // dll相关配置
    plugins: [
      new webpack.DllReferencePlugin({
        context: __dirname,
        // manifest就是第一步中打包出来的json文件
        manifest: require('./dist/vendor-manifest.json')
      })
    ]
  }

  // 代码4
  const HapptPack = require('happypack')
  // 手动创建进程池
  const happyThreadPool = HappyPack.ThreadPool({ size: os.cuus().length })

  module.exports = {
    module: {
      rules: [
        ...
        {
          test: /\.js$/,
          // 问号后面的查询参数指定了处理这类文件的HappyPack实例的名字
          loader: 'happypack/loader?id=happyBabel',
          ...
        }
      ]
    },
    plugins: [
      ...
      new HappyPack({
        // 这个HappyPack的‘名字’就叫做happyBabel，和上面的查询参数遥相呼应
        id: 'happyBabel',
        // 指定进程池
        threadPool: happyThreadPool,
        loaders: ['babel-loader?cacheDirectory']
      })
    ]
  }

  // 代码5
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

  module.exports = {
    plugins: [
      new BundleAnalyzerPlugin()
    ]
  }

  // 代码6
  // index.js
  import { page1, page2 } from './pages'

  show(page1)

  // pages/index.js
  export const page1 = ''

  export const page2 = ''

  // 打包阶段，未使用文件会被直接删除(主要针对于模块级别的冗余代码)
  export const page2 = ''

  // 代码7
  // webpack3
  const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
  module.exports = {
    new UglifyJsPlugin({
      // 允许并发
      parallel: true,
      // 开启缓存
      cache: true,
      compress: {
        // 删除所有console
        drop_console: true,
        // 把使用多次的静态值自动定义为变量
        reduce_vars: true
      },
      output: {
        // 删除注释
        comment: true,
        // 使输出代码尽可能紧凑
        beautify: false
      }
    })
  }

  // 代码8
  // 不按需加载的组件
  import BugComponent from './pages/BugComponent'
  ...

  <Route path='/bug' component={BugComponent} />

  // 开启按需加载
  // webpack配置修改
  output: {
    path: path.join(__dirname, '/../dist'),
    filename: 'app.js',
    publicPath: defaultSetting.publicPath,
    // 指定chunkFilename
    chunkFilename: '[name].[chunkhash:5].chunk.js'
  }

  // route.js
  const getComponent = (location, cb) => {
    require.ensure([], (require) => {
      cb(null, require('../pages/BugComponent').defaule)
    }, 'bug')
  }
  ...
  <Route path='/bug' getComponent={getComponent} />

  // route.js import(常用方式)
  const getComponent = (resolve) => {
    return import ('../pages/BugComponent')
  }
  ...
  <Route path='/bug' getComponent={getComponent} />

  // 核心方法
  require.ensure(dependencies, callback, chunkName)

// index.html
* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
// 排除input与textarea
[contenteditable="true"], input, textarea {
  -webkit-user-select: auto!important;
  -khtml-user-select: auto!important;
  -moz-user-select: auto!important;
  -ms-user-select: auto!important;
  -o-user-select: auto!important;
  user-select: auto!important;
}

const isIos = function() {
  const isIphone = navigator.userAgent.includes('iPhone')
  const isIpad = navigator.userAgent.includes('iPad')
  return isIphone || isIpad
}

if (isIos) {
  window.location.href = 'tel:15000000000'
} else {
  window.open('tel:15000000000')
}

<input
  id='phone'
  type='tel'
  maxLength='11'
  placeholder='请输入'
  onChange={({ target: { value } }) => handlePhone(value)}
  onBlur={() => inputOnBlur()}
/>

const check = () => {
  setTimeout(() => {
    const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
    window.scrollTo(0, Math.max(scrollHeight - 1, 0))
  }, 100)
}

const inputOnBlur = () => {
  document.getElementById('phone').setAttribute('onblur', check())

  setTimeout(() => {
    window.scrollTo(0, document.body.scrollTop + 1)
    document.body.scrollTop >= 1 && window.scrollTo(0, document.body.scrollTop - 1)
  }, 100)
}

 npm install react-live-route --save

// routes.js
export const routes = [
  {
    path: '/',
    exact: true,
    component: () => <Redirect to='/list' />
  },
  /*
  {
    path: '/list',
    exact: true,
    component: () => <DirectListPage />
  },
  */
  {
    path: '/create',
    exact: true,
    component: () => (
      <PermissionWrap>
        <DirectCreatePage />
      </PermissionWrap>
    )
  }
]
// 需要处理的路由列表
export const keepRouter = [
  {
    path: '/list',
    component: DirectListPage
  },
  {
    path: '/demand/list',
    component: DemandListPage
  }
]

// APP.js
import NotLiveRoute from 'react-live-route'
import { routes, keepRouter } from './pages/routes'

const LiveRoute = withRouter(NotLiveRoute)

<HashRouter>
  <>
    <Switch>
      {routes.map((item, index) => {
        return (
          <Route
            key={index}
            path={item.path}
            exact
            render={props => {
              if (canDirectLogin === true) {
                return <item.component {...props} />
              } else if (canDirectLogin === false) {
                return <ForbiddenPage />
              } else {
                return <Loading.Full />
              }
            }}
           />
          )
        })}
        </Switch>
        {keepRouter.map((item, index) => {
          return (
            <LiveRoute
              key={index}
              path={item.path}
              alwaysLive
              component={item.component}
              name={item.path}
            />
          )
        }
      )}
    </>
 </HashRouter>

// 最终的重定向方法
// 去除重定向地址中的#，同时添加参数connect_redirect
redirectWXAuth = () => {
  const { goToPage } = this.state
  const url = (goToPage + '').replace('#', '')
  const redirectUrl = encodeURIComponent(
    `${process.env.REDIRECT_HOST}/login?goto_page=${encodeURIComponent(url)}&bindCode=1`
  )
  const wechatAuthUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${process.env.WXAPPID}&redirect_uri=${redirectUrl}&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect`
  window.location.replace(wechatAuthUrl)
}

flutter doctor

flutter emulators

// mac端
flutter emulators --launch iOS Simulator
// windows
flutter emulators --launch Pixel_3a_API_30_x86

flutter run

  // 注册service worker
  window.naviagtor.serviceWorker.register('/test.js').then(
    function() {
      console.log('注册成功)
    }
  ).catch(err => {
    console.error('注册失败')
  })

  // test.js
  // 要缓存文件test.html,test.css,test.js
  // Service Worker会监听 install事件，我们在其对应的回调里可以实现初始化的逻辑  
  self.addEventListener('install', event => {
    event.waitUntil(
      // 考虑到缓存也需要更新，open内传入的参数为缓存的版本号
      caches.open('test-v1').then(cache => {
        return cache.addAll([
          // 此处传入指定的需缓存的文件名
          '/test.html',
          '/test.css',
          '/test.js'
        ])
      })
    )
  })

  // Service Worker会监听所有的网络请求，网络请求的产生触发的是fetch事件，我们可以在其对应的监听函数中实现对请求的拦截，进而判断是否有对应到该请求的缓存，实现从Service Worker中取到缓存的目的
  self.addEventListener('fetch', event => {
    event.respondWith(
      // 尝试匹配该请求对应的缓存值
      caches.match(event.request).then(res => {
        // 如果匹配到了，调用Server Worker缓存
        if (res) {
          return res
        }
        // 如果没匹配到，向服务端发起这个资源请求
        return fetch(event.request).then(response => {
          if (!response || response.status !== 200) {
            return response
          }
          // 请求成功的话，将请求缓存起来。
          caches.open('test-v1').then(function(cache) {
            cache.put(event.request, response)
          })
          return response.clone()
        })
      })
    )
  })

  // pageA
  import './a.css'
  <div className='layout-header'>pageA</div>

  // a.css
  .layout-header {
    color: 'red'
  }

  // pageB
  import './b.css'
  <div className='layout-header'>pageB</div>

  // b.css
  .layout-header {
    margin: 10px
  }

  // 方案一实现
  <div class='pageA'>
    <h4 class='text'>pageA</h4>
  </div>

  <div class='pageB'>
    <h4 class='text'>pageB</h4>
  </div>

  // 方案二实现
  // style.css
  .text {
    color: 'red'
  }

  import styles from './style.css'
  <div class={styles.text}>方案2</div>

  // 编译之后的结果
  <div class="_3zyde4l1yATCOkgn-DBWEL"></div>
  <style>
  ._3zyde4l1yATCOkgn-DBWEL {
    color: 'red';
  }
  </style>

  // 伪代码
  // styles/index.js
  const export FONT_24 = 24
  const export COLOR_DARK = '#ccc'
  ...
  ...

  // index.js
  import './styles'
  .text {
    font-size: FONT_24
  }

  import React, { Component } from 'react'
  import { Modal, Button } from 'antd'

  class ClassPage extends Component {
    constructor(props) {
      super(props)
      this.state = {
        visible1: false,
        visible2: false
      }
    }

    render() {
      return (
        <div>
          <Button type='primary' onClick={() => this.setState({visible1: true})}>按钮1</Button>
          <Button type='primary' onClick={() => this.setState({visible2: true})}>按钮2</Button>
          <Modal
            visible={this.state.visible1}
            onCancel={() => this.setState({visible1: false})}
          >
            modal1
          </Modal>
          <Modal
            visible={this.state.visible2}
            onCancel={() => this.setState({visible2: false})}
          >
            modal2
          </Modal>
        </div>
      )
    }
  }

  export default ClassPage

  import React, { useCallback, useState } from 'react'
  import { Modal, Button } from 'antd'

  function useTrigger(initialValue = false) {
    const [visible, setVisible] = useState(initialValue)

    const open = useCallback(() => {
      setVisible(true)
    }, [setVisible])

    const close = useCallback(() => {
      setVisible(false)
    }, [setVisible])

    return {
      visible,
      open,
      close
    }
  }

  function HooksPage () {
    const trigger = useTrigger()
    const trigger1 = useTrigger()
    return (
      <div>
        <Button type='primary' onClick={trigger.open}>按钮1</Button>
        <Button type='primary' onClick={trigger1.open}>按钮2</Button>
        <Modal
          visible={trigger.visible}
          onCancel={trigger.close}
        >
          modal1
        </Modal>
        <Modal
          visible={trigger1.visible}
          onCancel={trigger1.close}
        >
          modal2
        </Modal>
      </div>
    )
  }

  export default HooksPage

  var name = 'xcc'
  console.log(name)

  // 令牌
  Keyword(var)
  Identifier(name)
  Punctuator(=)
  String('xcc')
  Identifier(console)
  Punctuator(.)
  Identifier(log)
  Punctuator(()
  Identifier(name)
  Punctuator())