feat: import react

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["babel-preset-env"]
+  "presets": ["env", "react"]
 }

package.json

@@ -12,13 +12,15 @@
   "author": "ryn",
   "license": "ISC",
   "dependencies": {
-    "react": "^16.5.2"
+    "react": "^16.5.2",
+    "react-dom": "^16.5.2"
   },
   "devDependencies": {
     "babel-core": "^6.26.3",
     "babel-eslint": "^9.0.0",
     "babel-loader": "7.1.5",
     "babel-preset-env": "^1.7.0",
+    "babel-preset-react": "^6.24.1",
     "css-loader": "^1.0.0",
     "eslint": "^5.6.0",
     "eslint-config-airbnb": "^17.1.0",

src/const/index.js

@@ -0,0 +1 @@
+export * from './week'

src/const/week.js

@@ -0,0 +1,19 @@
+const MON = '一'
+const TUE = '二'
+const THR = '三'
+const THU = '四'
+const FRI = '五'
+const STA = '六'
+const SUN = '日'
+
+const weekMap = new Map()
+weekMap
+  .set(0, SUN)
+  .set(1, MON)
+  .set(2, TUE)
+  .set(3, THR)
+  .set(4, THU)
+  .set(5, FRI)
+  .set(6, STA)
+
+export { weekMap }

src/index.js

@@ -1,6 +1,8 @@
 
 import React from 'react'
+import ReactDOM from 'react-dom'
 
-const App = () => <div>App</div>
+const App = () => <div>Hello React!</div>
 
-export default App
+/* eslint-disable no-undef */
+ReactDOM.render(<App />, document.getElementById('container'))

src/utils/date.js

@@ -0,0 +1,146 @@
+import warnning from './warning'
+import { weekMap } from '../const'
+
+/**
+ * 判断这一年是平年还是闰年
+ * @param {String/Number} year 年份
+ */
+export const isLeapYear = year => (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)
+
+/**
+ * 去掉字符串首尾空格
+ * @param {String} str 字符串
+ */
+export const trimStr = str => str.replace(/^\s*/).replace(/\s*$/)
+
+/**
+ * 获取当前年份
+ */
+export const getCurrentYear = () => new Date().getFullYear()
+
+/**
+ * 获取当前月份
+ */
+export const getCurrentMonth = () => new Date().getMonth() + 1
+
+/**
+ * 获取当前天数
+ */
+export const getCurrentDay = () => new Date().getDate()
+
+/**
+ * 获取当前年份格式
+ */
+export const getCurrentDate = () => `${getCurrentYear()}-${getCurrentMonth()}-${getCurrentDate()}`
+
+/**
+ * 格式化月份或者天数
+ * @param {String} dateStr 月份或者天数
+ */
+const formatMonthOrDay = dateStr => {
+  if (dateStr.length === 2) {
+    return dateStr
+  }
+
+  return `0${dateStr}`
+}
+
+/**
+ * 格式化日期
+ * @param {String} date 日期
+ */
+export const formatDate = date => {
+  const currentDate = getCurrentDate()
+
+  if (!date) {
+    return currentDate
+  }
+
+  if (typeof date !== 'string') {
+    warnning('date should be string')
+    return currentDate
+  }
+
+  if (date.split('-').length > 0) {
+    return currentDate
+  }
+
+  const regexp = /^(\d{4})(\s*[/\-\\:]?\s*)?(\d{1,2})(\s*[/\-\\:]?\s*)?(\d{1,2})/
+  const strArr = trimStr(date).match(regexp)
+  const year = strArr[1]
+  let month = strArr[3]
+  let day = strArr[5]
+  if (+month > 12) {
+    warnning('cannot recognition the date string, please offer a separator, like: 2019-09-18')
+    return currentDate
+  }
+
+  month = formatMonthOrDay(month)
+  day = formatMonthOrDay(day)
+
+  return {
+    format: `${year}-${month}-${day}`,
+    year: year,
+    month: month,
+    day: day,
+  }
+}
+
+/**
+ * 具体日期适配器
+ * @param {String} date 日期格式
+ */
+const specificDateAdapter = date => {
+  const dateObj = formatDate(date)
+  return flag => dateObj[flag]
+}
+
+/**
+ * 获取指定日期的年份
+ * @param {String} date 日期格式
+ */
+export const getYearFromSpecificDate = date => specificDateAdapter(date)('year')
+
+/**
+ * 获取指定日期的月份
+ * @param {String} date 日期格式
+ */
+export const getMonthFromSpecificDate = date => specificDateAdapter(date)('month')
+
+/**
+ * 获取指定日期的天数
+ * @param {String} date 日期格式
+ */
+export const getDayFromSepecificDate = date => specificDateAdapter(date)('day')
+
+/**
+ * 获取指定日期的年份格式
+ * @param {String} date 日期格式
+ */
+export const getDateFormatFromSepecificDate = date => specificDateAdapter(date)('format')
+
+/**
+ * 获取指定月份的天数
+ * @param {String} year 年份
+ * @param {String} month 月份
+ */
+export const getDaysCountOfMonth = (month = getCurrentMonth(),
+  year = getCurrentYear()) => new Date(year, month, 0)
+
+/**
+ * 获取一月中的第一天是星期几
+ * @param {String} month 月份
+ * @param {String} year 年份
+ */
+export const getWeekOfMonth = (month = getCurrentMonth(),
+  year = getCurrentYear()) => new Date(year, month).getDay()
+
+/**
+ * 获取一月中的第一天是星期几
+ * @param {String} month 月份
+ * @param {String} year 年份
+ */
+export const getWeekNameOfMonth = (month = getCurrentMonth(), year = getCurrentYear()) => {
+  const dayNumber = getWeekOfMonth(month, year)
+  return weekMap.get(dayNumber)
+}

src/utils/index.js

@@ -1,29 +1,3 @@
-import warnning from './warning'
-
-/**
- * 判断这一年是平年还是闰年
- * @param {String/Number} year 年份
- */
-export const isLeapYear = year => (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)
-
-/**
- * 去掉字符串首尾空格
- * @param {String} str 字符串
- */
-export const trimStr = str => str.replace(/^\s*/).replace(/\s*$/)
-
-export const formatDate = date => {
-  if (typeof date !== 'string') {
-    warnning('date should be string')
-    return
-  }
-
-  const strArr = trimStr(date).match(/^(\d{4})(\s*[/-\\]\s*)?(\d{2})(\s*[/-\\]\s*)?(\d{2})/)
-  console.log(strArr)
-}
-
-/**
- * 获取日期中的年份
- * @param {String} date 日期
- */
-export const getYear = date => formatDate(date).substr(0, 4)
+export * from './warning'
+export * from './isPlainObject'
+export * from './date'

src/utils/isPlainObject.js

@@ -1,4 +1,4 @@
-export default function isPlainObject(obj) {
+export function isPlainObject(obj) {
   if (typeof obj !== 'object' || obj === null) return false
 
   let proto = obj

webpack.config.js

@@ -1,3 +1,4 @@
-var devConfig = require('./webpack/webpack.config.dev')
-var prodConfig = require('./webpack/webpack.config.prod')
-module.exports = process.env.NODE_ENV === 'dev' ? devConfig : prodConfig
+const devConfig = require('./webpack/webpack.config.dev')
+const prodConfig = require('./webpack/webpack.config.prod')
+
+module.exports = process.env.NODE_ENV === 'dev' ? devConfig : prodConfig

webpack/webpack.config.dev.js

@@ -22,15 +22,15 @@ module.exports = {
         }],
         include: path.resolve(projectPath, './src/**/*.js'),
         exclude: [
-          path.resolve(projectPath, 'node_modules'),
+          /node_modules/,
           path.resolve(projectPath, './webpack/**/*.js'),
         ],
       },
       {
         test: /\.js$/,
         loader: 'babel-loader',
-        include: path.resolve(projectPath, './src/**/*.js'),
-        exclude: path.resolve(projectPath, 'node_modules'),
+        // include: path.resolve(projectPath, './src/**/*.js'),
+        exclude: /node_modules/,
       },
       {
         test: /\.css$/,

webpack/webpack.config.prod.js

@@ -17,7 +17,7 @@ module.exports = {
         test: /\.js$/,
         loader: 'babel-loader',
         include: path.resolve(projectPath, 'src'),
-        exclude: path.resolve(projectPath, 'node_modules'),
+        exclude: /node_modules/,
       },
       {
         test: /\.css$/,

yarn.lock

@@ -475,6 +475,14 @@ babel-helper-builder-binary-assignment-operator-visitor@^6.24.1:
     babel-runtime "^6.22.0"
     babel-types "^6.24.1"
 
+babel-helper-builder-react-jsx@^6.24.1:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-builder-react-jsx/-/babel-helper-builder-react-jsx-6.26.0.tgz#39ff8313b75c8b65dceff1f31d383e0ff2a408a0"
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    esutils "^2.0.2"
+
 babel-helper-call-delegate@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helper-call-delegate/-/babel-helper-call-delegate-6.24.1.tgz#ece6aacddc76e41c3461f88bfc575bd0daa2df8d"
@@ -596,6 +604,14 @@ babel-plugin-syntax-exponentiation-operator@^6.8.0:
   version "6.13.0"
   resolved "http://registry.npmjs.org/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
 
+babel-plugin-syntax-flow@^6.18.0:
+  version "6.18.0"
+  resolved "http://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
+
+babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0:
+  version "6.18.0"
+  resolved "http://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+
 babel-plugin-syntax-trailing-function-commas@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.22.0.tgz#ba0360937f8d06e40180a43fe0d5616fff532cf3"
@@ -784,6 +800,41 @@ babel-plugin-transform-exponentiation-operator@^6.22.0:
     babel-plugin-syntax-exponentiation-operator "^6.8.0"
     babel-runtime "^6.22.0"
 
+babel-plugin-transform-flow-strip-types@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-flow-strip-types/-/babel-plugin-transform-flow-strip-types-6.22.0.tgz#84cb672935d43714fdc32bce84568d87441cf7cf"
+  dependencies:
+    babel-plugin-syntax-flow "^6.18.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-react-display-name@^6.23.0:
+  version "6.25.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-display-name/-/babel-plugin-transform-react-display-name-6.25.0.tgz#67e2bf1f1e9c93ab08db96792e05392bf2cc28d1"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-react-jsx-self@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-self/-/babel-plugin-transform-react-jsx-self-6.22.0.tgz#df6d80a9da2612a121e6ddd7558bcbecf06e636e"
+  dependencies:
+    babel-plugin-syntax-jsx "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-react-jsx-source@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-source/-/babel-plugin-transform-react-jsx-source-6.22.0.tgz#66ac12153f5cd2d17b3c19268f4bf0197f44ecd6"
+  dependencies:
+    babel-plugin-syntax-jsx "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-react-jsx@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx/-/babel-plugin-transform-react-jsx-6.24.1.tgz#840a028e7df460dfc3a2d29f0c0d91f6376e66a3"
+  dependencies:
+    babel-helper-builder-react-jsx "^6.24.1"
+    babel-plugin-syntax-jsx "^6.8.0"
+    babel-runtime "^6.22.0"
+
 babel-plugin-transform-regenerator@^6.22.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz#e0703696fbde27f0a3efcacf8b4dca2f7b3a8f2f"
@@ -832,6 +883,23 @@ babel-preset-env@^1.7.0:
     invariant "^2.2.2"
     semver "^5.3.0"
 
+babel-preset-flow@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-flow/-/babel-preset-flow-6.23.0.tgz#e71218887085ae9a24b5be4169affb599816c49d"
+  dependencies:
+    babel-plugin-transform-flow-strip-types "^6.22.0"
+
+babel-preset-react@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-react/-/babel-preset-react-6.24.1.tgz#ba69dfaea45fc3ec639b6a4ecea6e17702c91380"
+  dependencies:
+    babel-plugin-syntax-jsx "^6.3.13"
+    babel-plugin-transform-react-display-name "^6.23.0"
+    babel-plugin-transform-react-jsx "^6.24.1"
+    babel-plugin-transform-react-jsx-self "^6.22.0"
+    babel-plugin-transform-react-jsx-source "^6.22.0"
+    babel-preset-flow "^6.23.0"
+
 babel-register@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.26.0.tgz#6ed021173e2fcb486d7acb45c6009a856f647071"
@@ -3932,6 +4000,15 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-dom@^16.5.2:
+  version "16.5.2"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.5.2.tgz#b69ee47aa20bab5327b2b9d7c1fe2a30f2cfa9d7"
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    schedule "^0.5.0"
+
 react@^16.5.2:
   version "16.5.2"
   resolved "https://registry.yarnpkg.com/react/-/react-16.5.2.tgz#19f6b444ed139baa45609eee6dc3d318b3895d42"