Master

.vcmrc

@@ -0,0 +1,16 @@
+{
+  "helpMessage": "\n 请修改你的提交信息 (and consider using https://www.npmjs.com/package/commitizen)\n",
+  "types": [
+    "feat",
+    "fix",
+    "docs",
+    "style",
+    "refactor",
+    "perf",
+    "test",
+    "chore",
+    "revert"
+  ],
+  "warnOnFail": false,
+  "autoFix": false
+}

config/public.config.js

@@ -0,0 +1,7 @@
+const paths = require('./paths');
+const path = require("path")
+
+exports.alias = {
+  'assets': path.resolve(paths.appSrc, 'assets'),
+  'components': path.resolve(paths.appSrc, 'components')
+}

config/webpack.config.dev.js

@@ -96,7 +96,7 @@ module.exports = {
       '.jsx',
     ],
     alias: {
-      
+
       // Support React Native Web
       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
       'react-native': 'react-native-web',
@@ -145,7 +145,7 @@ module.exports = {
             include: paths.appSrc,
             loader: require.resolve('babel-loader'),
             options: {
-              
+
               compact: true,
             },
           },
@@ -164,6 +164,51 @@ module.exports = {
               },
             ],
           },
+          // scss sass
+          {
+            test: /\.(scss|sass)$/,
+            use: [
+              require.resolve('style-loader'),
+              {
+                loader: require.resolve('typings-for-css-modules-loader'),
+                options: {
+                  importLoaders: 2, // 前置loader个数
+                  modules: true,
+                  namedExport: true,
+                  camelCase: true,
+                  localIdentName: "[local]---[hash:base64:8]",
+                  sourceMap: true
+                },
+              },
+              {
+                loader: require.resolve('postcss-loader'),
+                options: {
+                  // Necessary for external CSS imports to work
+                  // https://github.com/facebookincubator/create-react-app/issues/2677
+                  ident: 'postcss',
+                  plugins: () => [
+                    require('postcss-flexbugs-fixes'),
+                    autoprefixer({
+                      browsers: [
+                        '>1%',
+                        'last 4 versions',
+                        'Firefox ESR',
+                        'not ie < 9', // React doesn't support IE8 anyway
+                      ],
+                      flexbox: 'no-2009',
+                    }),
+                  ],
+                  sourcemap: true
+                },
+              },
+              {
+                loader: require.resolve('sass-loader'),
+                options: {
+                  sourcemap: true
+                }
+              }
+            ],
+          },
           // "postcss" loader applies autoprefixer to our CSS.
           // "css" loader resolves paths in CSS and adds assets as dependencies.
           // "style" loader turns CSS into JS modules that inject <style> tags.

config/webpack.config.prod.js

@@ -103,7 +103,7 @@ module.exports = {
       '.jsx',
     ],
     alias: {
-      
+
       // Support React Native Web
       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
       'react-native': 'react-native-web',
@@ -150,7 +150,7 @@ module.exports = {
             include: paths.appSrc,
             loader: require.resolve('babel-loader'),
             options: {
-              
+
               compact: true,
             },
           },
@@ -169,6 +169,51 @@ module.exports = {
               },
             ],
           },
+          // scss sass
+          {
+            test: /\.(scss|sass)$/,
+            use: [
+              require.resolve('style-loader'),
+              {
+                loader: require.resolve('typings-for-css-modules-loader'),
+                options: {
+                  importLoaders: 2, // 前置loader个数
+                  modules: true,
+                  namedExport: true,
+                  camelCase: true,
+                  localIdentName: "[local]---[hash:base64:8]",
+                  sourceMap: shouldUseSourceMap
+                },
+              },
+              {
+                loader: require.resolve('postcss-loader'),
+                options: {
+                  // Necessary for external CSS imports to work
+                  // https://github.com/facebookincubator/create-react-app/issues/2677
+                  ident: 'postcss',
+                  plugins: () => [
+                    require('postcss-flexbugs-fixes'),
+                    autoprefixer({
+                      browsers: [
+                        '>1%',
+                        'last 4 versions',
+                        'Firefox ESR',
+                        'not ie < 9', // React doesn't support IE8 anyway
+                      ],
+                      flexbox: 'no-2009',
+                    }),
+                  ],
+                  sourcemap: shouldUseSourceMap
+                },
+              },
+              {
+                loader: require.resolve('sass-loader'),
+                options: {
+                  sourcemap: shouldUseSourceMap
+                }
+              }
+            ],
+          },
           // The notation here is somewhat confusing.
           // "postcss" loader applies autoprefixer to our CSS.
           // "css" loader resolves paths in CSS and adds assets as dependencies.

package.json

@@ -47,10 +47,13 @@
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
     "test": "node scripts/test.js --env=jsdom",
-    "precommit": "lint-staged"
+    "precommit": "lint-staged",
+    "commitmsg": "validate-commit-msg",
+    "commit": "git-cz ",
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
   },
   "lint-staged": {
-    "src/**/*.{js,jsx,json,css}": [
+    "src/**/*.{js,jsx,json,css,scss,tsx,ts}": [
       "prettier  --write",
       "git add"
     ]
@@ -60,10 +63,16 @@
     "@types/node": "^10.9.3",
     "@types/react": "^16.4.12",
     "@types/react-dom": "^16.0.7",
+    "commitizen": "^2.10.1",
+    "conventional-changelog-cli": "^2.0.5",
     "husky": "^0.14.3",
     "lint-staged": "^7.2.2",
+    "node-sass": "^4.9.3",
     "prettier": "^1.14.2",
-    "typescript": "^3.0.1"
+    "sass-loader": "^7.1.0",
+    "typescript": "^2.8.3",
+    "typings-for-css-modules-loader": "^1.7.0",
+    "validate-commit-msg": "^2.14.0"
   },
   "jest": {
     "collectCoverageFrom": [
@@ -88,7 +97,9 @@
       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|ts|tsx)$"
     ],
     "moduleNameMapper": {
-      "^react-native$": "react-native-web"
+      "^react-native$": "react-native-web",
+      "^assets/(.*)": "<rootDir>/src/assets/$1",
+      "^components/(.*)": "<rootDir>/src/components/$1"
     },
     "moduleFileExtensions": [
       "web.ts",
@@ -114,4 +125,4 @@
       "react-app"
     ]
   }
-}
+}

src/App.css → src/components/App/index.scss

@@ -1,28 +1,28 @@
-.App {
+.app {
   text-align: center;
 }
 
-.App-logo {
+.app-logo {
   animation: App-logo-spin infinite 20s linear;
   height: 80px;
 }
 
-.App-header {
+.app-header {
   background-color: #222;
   height: 150px;
   padding: 20px;
   color: white;
 }
 
-.App-title {
+.app-title {
   font-size: 1.5em;
 }
 
-.App-intro {
+.app-intro {
   font-size: large;
 }
 
-@keyframes App-logo-spin {
+@keyframes app-logo-spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }

src/components/App/index.scss.d.ts

@@ -0,0 +1,6 @@
+export const app: string;
+export const appLogo: string;
+export const appLogoSpin: string;
+export const appHeader: string;
+export const appTitle: string;
+export const appIntro: string;

src/App.test.tsx → src/components/App/index.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import App from './App';
+import App from '.';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');

src/components/App/index.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import * as style from './index.scss';
+import logo from 'assets/logo.svg';
+
+class App extends React.Component {
+  public render() {
+    return (
+      <div className={style.app}>
+        <header className={style.appHeader}>
+          <img src={logo} className={style.appLogo} alt="logo" />
+          <h1 className={style.appTitle}>Welcome to React</h1>
+        </header>
+        <p className={style.appIntro}>
+          To get started, edit <code>src/App.tsx</code> and save to reload.
+        </p>
+      </div>
+    );
+  }
+}
+
+export default App;

src/index.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import App from './App';
-import './index.css';
+import App from './components/App';
 import registerServiceWorker from './registerServiceWorker';
+import './style/global.scss';
 
 ReactDOM.render(
   <App />,

src/style/global.scss

@@ -0,0 +1,7 @@
+:global {
+  body {
+    margin: 0;
+    padding: 0;
+    font-family: sans-serif;
+  }
+}

src/style/global.scss.d.ts

@@ -0,0 +1 @@
+export {};

src/style/mixins.scss

@@ -0,0 +1,19 @@
+@mixin btn {
+  display: inline-block;
+  padding: 0 10px;
+  height: 32px;
+  background: $button-default-color;
+  border: 1px solid $button-border-color;
+  border-radius: 2px;
+  color: $button-font-color;
+  text-align: center;
+  vertical-align: middle;
+  font-size: $font-size-small;
+  cursor: pointer;
+}
+
+@mixin icon {
+  display: inline-block;
+  text-indent: -2000em;
+  vertical-align: middle;
+}

src/style/placeholder.scss

@@ -0,0 +1 @@
+

src/style/variables.scss

@@ -0,0 +1 @@
+

tsconfig.json

@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
     "baseUrl": ".",
+    "paths": {
+      "assets/*": ["src/assets/*"],
+      "components/*": ["src/components/*"]
+    },
     "outDir": "build/dist",
     "module": "esnext",
     "target": "es5",

tslint.json

@@ -6,5 +6,8 @@
       "node_modules/**/*.ts",
       "coverage/lcov-report/*.js"
     ]
+  },
+  "rules": {
+    "ordered-imports": false
   }
 }