if (UserAgent.env.android) {
      try {
          window.tbs_bridge.nativeExec('network', 'type', 0, null);
      } catch (e) {
          console.error(e);
      }
    }

window.addEventListener('popstate', handlePopstate);

window.addEventListener('hashchange', handleHashChange);

react.development.js:12 Uncaught ReferenceError: process is not defined
    at react.development.js:12
    at createCommonjsModule (bundle.js:6)
    at react.production.min.js:23
    at index.js:10

var process = {
  env: {
    NODE_ENV: 'production'
  }
}

import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
 
const Global = `var process = {
  env: {
    NODE_ENV: 'production'
  }
}`
 
export default {
    input: pathResolve('src/index.js'),
  output: {
     name: 'bundle',
        file: pathResolve("dist/js/bundle.js"),
        format: 'iife',//immediately-invoked function expression — suitable for <script> tags
        sourcemap: true,
    banner: Global//output.banner属性的作用是在打包后的文件顶部添加值。
  },
  plugins: [resolve(), commonjs()]

import replace from "@rollup/plugin-replace";
export default {
    input: pathResolve('src/index.js'),
    output: {
        name: 'bundle',
        file: pathResolve("dist/js/bundle.js"),
        format: 'iife',//immediately-invoked function expression — suitable for <script> tags
        sourcemap: true,
    },
    plugins: [
        resolve(), // tells Rollup how to find date-fns in node_modules

        babel({
            babelHelpers: "bundled",
            exclude: "**/node_modules/**",
        }),
        commonjs(), // converts date-fns to ES modules
         replace({
             "process.env.NODE_ENV": JSON.stringify("development"),
         }),
    ]
};

mkdir lottery-react
cd lottery-react
npm init

{
  "name": "lottery-react",
  "version": "1.0.2",
  "description": "lottery-react",
  "main": "lib/index.js",
  "module": "es/index.js",
  "unpkg": "dist/lottery.min.js",
  "files": [
    "dist",
    "lib",
    "es"
  ],
  "sideEffects": [
    "dist/*",
    "es/**/style/*",
    "lib/**/style/*",
    "*.scss"
  ],
  "scripts": {
    "clean": "rimraf lib es dist",
    "build:cjs": "babel src --out-dir lib",
    "build:es": "cross-env BABEL_ENV=jsnext babel src --out-dir es",
    "build:umd": "cross-env BABEL_ENV=rollup NODE_ENV=development rollup -c -f umd -o dist/lottery.js",
    "build:umd:min": "cross-env BABEL_ENV=rollup NODE_ENV=production rollup -c -f umd -o dist/lottery.min.js",
    "build": "npm run clean && npm run build:cjs && npm run build:es && npm run build:umd && npm run build:umd:min",
    "build:cjs2": "cross-env BABEL_ENV=rollup NODE_ENV=development rollup -c -f umd -o lib/index.js",
    "build:es2": "cross-env BABEL_ENV=rollup NODE_ENV=development rollup -c -f umd -o es/index.js",
    "build:all": "npm run clean && npm run build:cjs2 && npm run build:es2 && npm run build:umd && npm run build:umd:min",
    "examples": "npm-run-all --parallel examples:watch examples:start",
    "examples:clean": "rimraf example/dist",
    "examples:start": "serve example/dist",
    "examples:watch": "rollup -c example/rollup.config.js -w",
    "examples:build": "rollup -c example/rollup.config.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/sailormillet/lottery-react.git"
  },
  "keywords": [
    "Lottery",
    "lucky draw",
    "lotto",
    "sweepstake",
    "react"
  ],
  "author": "Amy",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/sailormillet/lottery-react/issues"
  },
  "homepage": "https://github.com/sailormillet/lottery-react#readme",
  "peerDependencies": {
    "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0",
    "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.12.10",
    "@babel/core": "^7.12.10",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "@rollup/plugin-alias": "^3.1.1",
    "@rollup/plugin-babel": "^5.2.2",
    "@rollup/plugin-commonjs": "^17.0.0",
    "@rollup/plugin-node-resolve": "^11.1.0",
    "@rollup/plugin-replace": "^2.3.4",
    "cross-env": "^7.0.3",
    "fs": "^0.0.1-security",
    "npm-run-all": "^4.1.5",
    "path": "^0.12.7",
    "postcss": "^8.2.4",
    "postcss-cssnext": "^3.1.0",
    "postcss-nested": "^5.0.3",
    "postcss-preset-env": "^6.7.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "rollup": "^2.36.1",
    "rollup-plugin-generate-html-template": "^1.7.0",
    "rollup-plugin-includepaths": "^0.2.4",
    "rollup-plugin-postcss": "^4.0.0",
    "rollup-plugin-scss": "^2.6.1",
    "rollup-plugin-uglify": "^6.0.4",
    "serve": "^11.3.2"
  },
  "dependencies": {}
}

├── dist                      
├── es                      
├── lib                      
├── example     
│   ├── dist              
│   ├── src              
│   │   ├── components          
│   │   ├── index.html             
│   │   └── index.js     
│   ├── rollup.config.js                                    
├── src                         
│   ├── styles              
│   │   └── index.scss          
│   └── index.js                                
├── README.md                   // 开发文档
├── .gitignore                  
├── .babelrc                    // babel配置                 
├── .eslintrc                   // ESLint 配置文件                    
├── .editorconfig               // IDE定义配置
├── package.json                // 模块描述文件
├── rollup.config.js            // 模块描述文件
└── yarn.lock                   // 依赖文件

import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import { uglify } from 'rollup-plugin-uglify';
import replace from '@rollup/plugin-replace';
import postcss from 'rollup-plugin-postcss';
const env = process.env.NODE_ENV;

const config = {
    input: 'src/index.js',
    //告诉rollup不要将此lodash打包，而作为外部依赖
    external: ["react"],
    // 是否开启代码分割
    experimentalCodeSplitting: true,
    output: {
        // dir: "lib",
        name: 'LuckDraw',
        format: 'umd',
        sourcemap: true,
        globals: {
            react: 'React'
        },
        exports: 'named',
    },
    plugins: [
        resolve(),
        babel({
            babelHelpers: 'bundled',
            exclude: '**/node_modules/**',
        }),
        commonjs(),
        postcss({
            minimize: env === 'production',
            extract: true,
            extensions: ["scss", "less", "css"],
            // plugins: [nested(), cssnext({ warnForDuplicates: false }), cssnano()],
            // extract: false // 无论是 dev 还是其他环境这个配置项都不做 样式的抽离
        }),
    ],
};


if (env === 'production') {
    config.plugins.push(
        uglify({
            compress: {
                pure_getters: true,
                unsafe: true,
                unsafe_comps: true,
            },
            warnings: false
        })
    );

    config.plugins.push(
        replace({
            'process.env.NODE_ENV': JSON.stringify('production')
        })
    )
}

export default config;

import React from 'react'
import './styles/index.scss'
class LuckDraw extends React.PureComponent {
    constructor(props) {
        super(props)
        this.state = {
            active_index: null,   // 奖品是否被选中，选中时，值为奖品index, 例如0,1,2,3...
            times: 'times' in props ? props.times * 1 : 1, // 抽奖次数
            is_rolling: false,  // 正在抽奖时，禁止重复点击
            roll_map_list: [0, 1, 2, 7, 8, 3, 6, 5, 4],  // 运动顺序，数据映射
        };
        this.lotteryTimer = null;
        this.current_index = 0;
        this.CYCLE_TIMES = 0;
        this.speed = 50;
    }
    componentWillUnmount() {
        clearTimeout(this.lotteryTimer);
        clearTimeout(this.callbacktimer)
    }
    data_format(data) {
        if (data) {
            // let gift_list = data.slice(0, 8);
            let gift_list = data.slice(0);
            gift_list.splice(gift_list.length / 2, 0, {
                name: "立即抽奖",
                image: "",
                id: "",
                startBtn: true
            })
            return gift_list
        } else {
            console.error('未获取到奖品信息！');
            return []
        }
    }
    start = () => {
        const { roll_map_list, times } = this.state;
        const { gift, giftList, speed = 120, cycle_times = 3 } = this.props
        const gift_list = this.data_format(giftList)
        this.setState(
            {
                active_index: this.current_index,
            },
            () => {
                let act_item = gift_list[roll_map_list.indexOf(this.current_index)] || {}
                if (this.speed > speed && (act_item.id * 1 === gift.id * 1)) {
                    clearTimeout(this.lotteryTimer);
                    this.lotteryTimer = null;
                    this.CYCLE_TIMES = 0;
                    this.speed = 50;
                    this.callbacktimer = setTimeout(() => {
                        this.setState({ is_rolling: false, times: times - 1 })
                        this.props.callback && this.props.callback({ ...act_item, ...gift }, this)
                    }, 500);
                    return
                }
                this.current_index = ++this.current_index % gift_list.length;
                this.current_index === 0 && this.CYCLE_TIMES++;
                this.lotteryTimer = setTimeout(() => {
                    this.start();
                }, this.speed);
                if (this.CYCLE_TIMES > cycle_times) this.speed += 10;
            }
        );
    };
    reset = () => {
        this.setState({
            active_index: null,
        })
        this.lotteryTimer = null;
        this.current_index = 0;
        this.CYCLE_TIMES = 0;
        this.speed = 50;
    }
    handlePlay = () => {
        if (!this.state.times) return this.props.finishCallback && this.props.finishCallback(this);
        if (this.state.is_rolling) return;
        this.current_index = 0;
        this.CYCLE_TIMES = 0;
        this.speed = 50;
        if (this.props.beforeStart) {
            this.props.beforeStart().then(() => {
                this.setState({
                    is_rolling: true,
                }, () => {
                    this.start();
                })
            })
        } else {
            this.setState({
                is_rolling: true,
            }, () => {
                this.start();
            })
        }
    };
    render() {
        const { active_index, roll_map_list } = this.state;
        const gift_list = this.data_format(this.props.giftList)
        if (gift_list.length < 8) return null;
        return (
            <div className={`lottery pos-r`}>
                <div className={`lottery_content`}>
                    {gift_list.map((item, index) => {
                        let content = (
                            <div key={index} className={`lottery_item ${active_index === roll_map_list[index] ? 'lottery_item-active' : ''}`} >
                                {item.ele ? item.ele : <div className={`lottery_item_main`}>{item.name}</div>}
                            </div>
                        );
                        if (item.startBtn) {
                            content = (
                                <div key={index} className={`lottery_item`} onClick={this.handlePlay} >
                                    {typeof this.props.playBtn === 'object' ? this.props.playBtn : <div className={`lottery_item_main`} >{this.props.playBtn || item.name}</div>}
                                </div>
                            );
                        }
                        return content;
                    })}
                </div>
            </div>
        );
    }
}
export default LuckDraw

cd <目录> 
code .

{
    "gitProjectManager.baseProjectsFolders": [
        "/home/user/nodeProjects",
        "/home/user/personal/pocs"
    ]
}

{
  "workbench.colorTheme": "Dracula Soft",
  "editor.formatOnSave": true,//保存时使用VSCode 自身格式化程序格式化
  "javascript.format.enable": false,//关闭编辑器对 js 文件的格式化，交给 ESLint 来做格式化，否则会格式化两次，解决editor.formatOnSave的兼容问题
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    // For ESLint
    "source.fixAll.eslint": true,
    // For TSLint
    "source.fixAll.tslint": true,
    // For Stylelint
    "source.fixAll.stylelint": true
  },
  "eslint.probe": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
}

# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2 # 用两个空格代替制表符；
end_of_line = lf # win用cr lf，linux/unix用lf，mac用cr。统一window和mac
charset = utf-8
trim_trailing_whitespace = true# 在保存时删除尾部的空白字符；
insert_final_newline = true# 在文件结尾添加一个空白行；
max_line_length = 160# 每行代码最大宽度 160
[*.md]
trim_trailing_whitespace = false

yarn add @babel/cli @babel/core -D

"build": "babel src/index.js --out-file dist/index.js"

@babel/plugin-transform-arrow-functions 转化箭头函数
"plugins":[
        "@babel/plugin-transform-arrow-functions"
    ],

@babel/preset-env 转化基本语法

import '@babel/polyfill'; // 这就是@babel/polyfill的用法

let arrow = () => {
    console.log('arrow')
}
let arr = [1, 2, 3]
arr.includes(3)

"use strict";
require("@babel/polyfill");
var func = function func() {};
var arr = [1, 2, 4];
arr.includes(3);

yarn add webpack webpack-cli babel-loader -D

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules)/,
      loader: 'babel-loader'
    }
  ]
}

// loader: 'babel-loader' 改成如下：
use: {
  loader: 'babel-loader',
  options: {
    // 配置项在这里
  }
}

yarn add core-js@3 -D
yarn remove @babel/polyfill

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "browsers": [
                        "> 1%",
                        "last 2 versions"
                    ]
                },
                "useBuiltIns": "usage",
                "corejs": 3//默认是2
            }
        ]
    ]
}

#### 避免编译后的代码中出现重复的帮助程序，有效减少包体积 ,@babel/plugin-transform-runtime 是一个可以重复使用 Babel 注入的帮助程序，以节省代码大小的插件。@babel/plugin-transform-runtime 需要和 @babel/runtime 配合使用

```
src/index.js

src/other.js

编译后的代码，_classCallCheck 这个方法定义了两次。一个 js 文件就定义一次。那项目中有很多文件，岂不是定义很多次。

# Babel7 和 Babel6区别
#### preset 的变更
> 淘汰 es201x，删除 stage-x，强推 env (重点).凡是使用 es201x 的开发者，都应当使用 env 进行替换

为了减少开发者替换配置文件的机械工作，babel 开发了一款 babel-upgrade 的工具，它会检测 babel 配置中的 stage-x 并且替换成对应的 plugins。除此之外它还有其他功能，我们一会儿再详细看。(总之目的就是让你更加平滑地迁移到 babel 7)

#### npm package 名称的变化

这是 babel 7 的一个重大变化，把所有 babel-* 重命名为 @babel/*，例如：

babel-cli 变成了 @babel/cli。
babel-preset-env 变成了 @babel/preset-env。进一步，还可以省略 preset 而简写为 @babel/env。
babel-plugin-transform-arrow-functions 变成了 @babel/plugin-transform-arrow-functions。和 preset 一样，plugin 也可以省略，于是简写为 @babel/transform-arrow-functions。
这个变化不单单应用于 package.json 的依赖中，包括 .babelrc 的配置 (plugins, presets) 也要这么写，为了保持一致。例如

var foo = 'foo'
function sayHello() {
    console.log(foo)
}

<html>
<header></header>
<body>
    <!--先引用-->
    <script src="./foo.js"></script>
    <script>
        // 通过全局对象调用
        window.sayHello()
    </script>
</body>
</html>

(function(window) {
  let data = 'www.baidu.com'
  //操作数据的函数
  function foo() {
    //用于暴露有函数
    console.log(`foo() ${data}`)
  }
  function bar() {
    //用于暴露有函数
    console.log(`bar() ${data}`)
    otherFun() //内部调用
  }
  function otherFun() {
    //内部私有的函数
    console.log('otherFun()')
  }
  //暴露行为
  window.myModule = { foo, bar } //ES6写法
})(window)

<script>
    // 通过命名空间调用
    window.foo()
</script>

export const foo = 'foo'

// 会自动从服务器下载moduleA.js文件
import { foo } from './moduleA.js'
console.log(foo)

<html>
<header></header>
<body>
    <!--引入moduleB.js-->
    <script type="module" src="./moduleB.js"></script>
</body>
</html>

// 定义模块math.js
var basicNum = 0;
function add(a, b) {
  return a + b;
}
module.exports = { //在这里写上需要向外暴露的函数、变量
  add: add,
  basicNum: basicNum
}

// 引用自定义的模块时，参数包含路径，可省略.js
var math = require('./math');
math.add(2, 5);

/** 网页中引入require.js及main.js **/
<script src="js/require.js" data-main="js/main"></script>

/** main.js 入口文件/主模块 **/
// 首先用config()指定各模块路径和引用名
require.config({
  baseUrl: "js/lib",
  paths: {
    "jquery": "jquery.min",  //实际路径为js/lib/jquery.min.js
    "underscore": "underscore.min",
  }
});
// 执行基本操作
require(["jquery","underscore"],function($,_){
  // some code here
});

/** CMD写法 **/
define(function(require, exports, module) {
    var a = require('./a'); //在需要时申明
    a.doSomething();
    if (false) {
        var b = require('./b');
        b.doSomething();
    }
});

/** 定义模块 math.js **/
var basicNum = 0;
var add = function (a, b) {
    return a + b;
};
export { basicNum, add };

/** 引用模块 **/
import { basicNum, add } from './math';
function test(ele) {
    ele.textContent = add(99 + basicNum);
}

/** export default **/
//定义输出
export default { basicNum, add };
//引入
import math from './math';
function test(ele) {
    ele.textContent = math.add(99 + math.basicNum);
}

stylelint --fix src/**/*.{html,css,scss}

yarn add stylelint stylelint-config-standard stylelint-config-rational-order stylelint-prettier stylelint-config-prettier -D

{
  "defaultSeverity": "error",
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-standard",
    "stylelint-prettier/recommended",
  ],
  "rules":  {
    "selector-pseudo-class-no-unknown": [true, {
      ignorePseudoClasses: ["global"] //.module.scss
    }],
    "length-zero-no-unit": null,//单位可以有0
    "indentation": 2,
    "max-empty-lines": 1,
    "block-no-empty": true,
    "block-opening-brace-newline-after": "always-multi-line",
    "block-opening-brace-space-after": "always-single-line",
    "block-opening-brace-space-before": "always",
    "block-closing-brace-empty-line-before": "never",
    "declaration-empty-line-before": "never",
    "declaration-block-no-duplicate-properties": true,
    "declaration-block-no-redundant-longhand-properties": true,
    "shorthand-property-no-redundant-values": true,
    "no-empty-source": true,
    "no-eol-whitespace": true,
    "no-extra-semicolons": true,
    "no-invalid-double-slash-comments": true,
    "no-missing-end-of-source-newline": true,
    "at-rule-no-unknown": null,
  },
}

npm install --save-dev stylelint-config-prettier stylelint-prettier prettier

{
  "extends": ["stylelint-prettier/recommended"]
}