配置 ES6 环境

生成 package.json 文件

  • npm init -y
  • 通过 npm --save 或者 npm --save-dev 安装依赖包，其版本号，会包含在文件中
    • –save: 适用于生产和开发
    • –save-dev: 适用于开发环境

脚本命令

npm run command

全局安装 babel-cli

npm install -g babel-cli

安装转换环境

1
npm install --save-dev babel-preset-es2015 babel-cli

新建配置文件

新建.babelrc

1
2
3
4
5
6
7
{
  "presets": [
    ["env", {
      "modules": false
    }]
  ]
}

自动构建

  • npm install --save-dev webpack
  • npm install --save-dev webpack-dev-server
  • npm install --save-dev html-webpack-plugin
  • npm install --save-dev babel-loader babel-core
  • npm install --save-dev babel-preset-env
  • npm i --save-dev style-loader css-loader
  • npm install --save-dev sass-loader node-sass

新建 webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
let HtmlWebpackPlugin = require('html-webpack-plugin'),
let path = require('path');

module.exports = {
  entry: {
    app: path.resolve(__dirname, 'src', 'index.js')
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: path.resolve(__dirname, 'src')
      },
      {
        test: /\.css$/,
        loader: ['style-loader', 'css-loader'],
        include: path.resolve(__dirname, 'src')
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'src', 'index.html')
    })
  ]
};

package.json

1
2
3
4
"scripts": {
  // "start": "webpack-dev-server --port 3000"
  "start": "webpack-dev-server --hot --inline --port 3003"
},

前端 chrome 插件

  • React facebook 出品 (没什么大用处)
  • JSON viewer
  • Redux Devtool
  • UI Stack (查看网站用了哪些框架)
  • React Sight (太慢，太耗资源)

Visual Studio Code 插件

  • Vim
  • ESLint
  • React/React-Redux/React-Router
  • ES6 snippets
  • Terminal
  • auto file name
  • auto close tag
  • auto rename tag
  • npm intell
  • quokka
  • css peek
  • regex previewer

字体

  • Fira Code

setting

  • font size to larger
  • auto save

解决 npm install 慢问题

1
2
npm install -gd express --registry=http://registry.npm.taobao.org
npm config set registry http://registry.npm.taobao.org
  • 修改 .npmrc
1
2
3
4
registry=https://registry.npm.taobao.org
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=http://npm.taobao.org/mirrors/phantomjs
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/

React

新建 react 项目 (creact-react-app)

1
2
3
4
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start

React 组件数据

  • prop：对外接口
    • Component 构造函数
    • 通过 this.props 访问到父组件传递过来的 props 值
    • propTypes：接口规范
  • state：内部状态
    • defaultProps：属性默认值

React-Redux

安装 react-redux

1
2
3
4
5
npm install --save redux
npm install --save react-redux
npm install --save-dev redux-devtools
npm install --save redux-thunk
npm install --save react-router

实现

  • 状态设计：Store
  • action 构造函数
    • actionTypes
    • export action
  • 组合 Reducer
  • view
    • mapStateToProps：Store => props
      • dispatch：this.props.dispatch
    • mapDispatchToProps
      • 定义方法
    • 对于动态数量的子组件，每个子组件必需带上一个 key 属性

Redux-sage

安装

1
npm install --save redux-saga

dva

安装 dva-cli

npm install dva-cli -g

创建新应用

1
2
3
dva new dir
cd dir
npm start

Material UI

SVG ICON

安装 material UI

1
2
npm install material-ui
npm i --save react-tap-event-plugin

注意事项

1
2
3
4
// 导入使点击事件有效
import injectTapEventPlugin from 'react-tap-event-plugin';
// 组件外面需要包装一层 MuiThemeProvider
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'

Ant Design

Install

1
2
npm install antd --save
npm install babel-plugin-import --save-dev

按需加载

1
2
3
4
5
6
// .babelrc or babel-loader option
{
  "plugins": [
    ["import", { "libraryName": "antd", "style": true }]
  ]
}

国际化

1
2
3
4
5
6
7
import enUS from 'antd/lib/locale-provider/en_US';

return (
  <LocaleProvider locale={enUS}>
    <App />
  </LocaleProvider>
);
  • Ant Design 3.0 默认支持英文

fetch

1
2
3
npm install --save isomorphic-fetch es6-promise

import fetch from 'isomorphic-fetch'

React-Router 4

JS librays

  • lodash
  • ImmutableJS
  • moment
  • react-ace
  • styled-components

前后端分离

  • JSON 传递数据： jackson

Icon

iconfont

git 冷门但有用命令

删除分支

git branch -d branch_name

删除远端分支

git push origin --delete branch_name

撤销修改和 commit

1
2
git reset file
git reset --hard HEAD~1

Npm

npm 查看全局安装过的包命令

npm list -g --depth 0

卸载全局包命令

npm uninstall -g

更新全局依赖

npm update -g package_name