feat: Add assets-with-webpack 模板

assets-with-webpack/.autod.conf.js

@@ -0,0 +1,28 @@
+'use strict';
+
+module.exports = {
+  write: true,
+  plugin: 'autod-egg',
+  prefix: '^',
+  devprefix: '^',
+  exclude: [
+    'test/fixtures',
+    'coverage',
+  ],
+  dep: [
+    'egg',
+    'egg-scripts',
+  ],
+  devdep: [
+    'autod',
+    'autod-egg',
+    'egg-bin',
+    'tslib',
+    'typescript',
+  ],
+  keep: [
+  ],
+  semver: [
+  ],
+  test: 'scripts',
+};

assets-with-webpack/.babelrc

@@ -0,0 +1,32 @@
+{
+    "presets": [
+        "@babel/preset-react",
+        ["@babel/preset-env", {
+            "targets": {
+                "chrome": "58",
+                "ie": "11"
+            },
+            "useBuiltIns": "entry"
+        }]
+    ],
+    "plugins": [
+        [
+            "@babel/plugin-proposal-decorators",
+            {
+                "legacy": true
+            }
+        ],
+        "@babel/plugin-proposal-class-properties",
+        "react-hot-loader/babel",
+        "@babel/plugin-transform-runtime",
+        "@babel/plugin-syntax-dynamic-import",
+        [
+            "import",
+            {
+                "libraryName": "antd",
+                "libraryDirectory": "es",
+                "style": "css"
+            }
+        ]
+    ]
+}

assets-with-webpack/.eslintrc.js

@@ -0,0 +1,49 @@
+module.exports = {
+    extends: ['airbnb', 'prettier', 'prettier/react'],
+    parser: 'babel-eslint',
+    root: true,
+    env: {
+        browser: true,
+        es6: true
+    },
+    plugins: ['react', 'import', 'prettier'],
+    rules: {
+        'jsx-a11y/anchor-is-valid': [
+            'error',
+            {
+                components: ['Link'],
+                specialLink: ['to']
+            }
+        ], // 允许正常使用 Link
+        'jsx-a11y/interactive-supports-focus': 0,
+        'jsx-a11y/click-events-have-key-events': 0,
+        'no-static-element-interactions': 0,
+        'react/jsx-filename-extension': [1, {
+            extensions: ['.js', '.jsx']
+        }], //允许在 .js 后缀文件中写 jsx
+        'react/destructuring-assignment': 0, // 不强制对 state props 使用解构赋值
+        'react/forbid-prop-types': 0, // 不禁止使用一些指定的 propTypes
+        'react/no-multi-comp': 0, // 可以在一个文件里写多个 react component
+        'prefer-destructuring': ['error', {
+            object: true,
+            array: false
+        }], // 不强制要求使用数组解构赋值
+        'no-console': 0, //可以 console
+        semi: 0, //禁止在语句末尾使用分号
+        'no-unused-expressions': 0, // 支持 func && func() 的写法
+        'no-param-reassign': 0, // 允许修改函数参数
+        'no-plusplus': ['error', {
+            allowForLoopAfterthoughts: true
+        }], //允许在循环中使用 i++ / i--
+        'comma-dangle': ['error', 'only-multiline'], // 对象的最后一个元素后不需要逗号
+        'import/extensions': ['off', 'never'], // import 的时候可以不带文件后缀
+        'import/no-unresolved': 0, //import 路径
+        'import/no-extraneous-dependencies': ['error', {
+            packageDir: './'
+        }],
+        'prettier/prettier': ['error', {
+            singleQuote: true,
+            semi: false
+        }]
+    }
+}

assets-with-webpack/.gitignore

@@ -0,0 +1,25 @@
+logs/
+npm-debug.log
+node_modules/
+coverage/
+.idea/
+run/
+logs/
+.DS_Store
+.vscode
+*.swp
+*.lock
+*.js
+
+app/**/*.js
+test/**/*.js
+config/**/*.js
+app/**/*.map
+test/**/*.map
+config/**/*.map
+app/public/
+
+!.autod.conf.js
+!.eslintrc.js
+!.prettierrc.js
+!app/assets/**/*.js

assets-with-webpack/.nyc_output/0477ab9a-7497-4188-adb1-34be4340450b.json

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

assets-with-webpack/.prettierrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+    singleQuote: true,
+    semi: false
+}

assets-with-webpack/.travis.yml

@@ -0,0 +1,10 @@
+sudo: false
+language: node_js
+node_js:
+  - '8'
+install:
+  - npm i npminstall && npminstall
+script:
+  - npm run ci
+after_script:
+  - npminstall codecov && codecov

assets-with-webpack/README.md

@@ -0,0 +1,31 @@
+# 基于egg + react 的全栈模板
+使用 egg-view-assets 插件，整合的 egg + react + webpack前端构建的全栈模板
+
+## QuickStart
+
+### 开发
+
+```bash
+$ npm i
+$ npm run dev
+$ open http://localhost:7001/
+```
+
+### 部署
+
+```bash
+$ npm run build - 静态资源构建打包
+$ npm run tsc - ts编译
+$ npm start - 服务器启动
+```
+
+### 相关命令
+
+- Use `npm run lint` to check code style
+- Use `npm test` to run unit test
+- se `npm run clean` to clean compiled js at development mode once
+
+### 要求
+
+- Node.js 8.x
+- Typescript 2.8+

assets-with-webpack/app/assets/App.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+
+const App = () => (
+  <div>
+    <h3>Hello world</h3>
+    <p>这是一个 egg + react 的全栈应用，前端基于webpack构建</p>
+  </div>
+)
+
+export default App

assets-with-webpack/app/assets/index.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Hello world</title>
+    <style>
+        @-webkit-keyframes square-spin {
+            25% {
+                -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
+                transform: perspective(100px) rotateX(180deg) rotateY(0)
+            }
+
+            50% {
+                -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
+                transform: perspective(100px) rotateX(180deg) rotateY(180deg)
+            }
+
+            75% {
+                -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
+                transform: perspective(100px) rotateX(0) rotateY(180deg)
+            }
+
+            100% {
+                -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
+                transform: perspective(100px) rotateX(0) rotateY(0)
+            }
+        }
+
+        @keyframes square-spin {
+            25% {
+                -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
+                transform: perspective(100px) rotateX(180deg) rotateY(0)
+            }
+
+            50% {
+                -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
+                transform: perspective(100px) rotateX(180deg) rotateY(180deg)
+            }
+
+            75% {
+                -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
+                transform: perspective(100px) rotateX(0) rotateY(180deg)
+            }
+
+            100% {
+                -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
+                transform: perspective(100px) rotateX(0) rotateY(0)
+            }
+        }
+
+        .square-spin>div {
+            -webkit-animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
+            animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
+            -webkit-animation-fill-mode: both;
+            animation-fill-mode: both;
+            width: 50px;
+            height: 50px;
+            background: #06f
+        }
+
+        .square-spin {
+            display: flex;
+            justify-content: center;
+            position: relative;
+            top: 200px
+        }
+    </style>
+</head>
+
+<body style='background: #f0f2f5'>
+    <div id="app" style="height: 100%">
+        <div class="square-spin">
+            <div></div>
+        </div>
+    </div>
+    {% if Env == 'local' %}
+        {{ helper.assets.getScript('app.js') | safe }}
+    {% else %}
+        {{ helper.assets.getScript('app.js') | safe }}
+        {{ helper.assets.getScript('vendors.js') | safe }}
+        {{ helper.assets.getScript('manifest.js') | safe }}
+    {% endif %}
+</body>
+
+</html>

assets-with-webpack/app/assets/index.js

@@ -0,0 +1,6 @@
+import React from 'react'
+import ReactDom from 'react-dom'
+
+import App from './App.jsx'
+
+ReactDom.render(<App />, document.getElementById('app'))

assets-with-webpack/app/controller/home.ts

@@ -0,0 +1,16 @@
+import { Controller } from 'egg';
+import manifestMap from '../../config/manifest.json';
+
+export default class HomeController extends Controller {
+  async index() {
+    const { ctx } = this;
+    await ctx.render('index.html', {
+      Env: ctx.app.env,
+      ManifestMap: manifestMap,
+    });
+  }
+
+  async hello() {
+    this.ctx.response.body = 'hi';
+  }
+}

assets-with-webpack/app/router.ts

@@ -0,0 +1,8 @@
+import { Application } from 'egg';
+
+export default (app: Application) => {
+  const { controller, router } = app;
+
+  router.get('/', controller.home.index);
+  router.get('/hi', controller.home.hello);
+};

assets-with-webpack/app/service/Test.ts

@@ -0,0 +1,15 @@
+import { Service } from 'egg';
+
+/**
+ * Test Service
+ */
+export default class Test extends Service {
+
+  /**
+   * sayHi to you
+   * @param name - your name
+   */
+  public async sayHi(name: string) {
+    return `hi, ${name}`;
+  }
+}

assets-with-webpack/appveyor.yml

@@ -0,0 +1,14 @@
+environment:
+  matrix:
+    - nodejs_version: '8'
+
+install:
+  - ps: Install-Product node $env:nodejs_version
+  - npm i npminstall && node_modules\.bin\npminstall
+
+test_script:
+  - node --version
+  - npm --version
+  - npm run test
+
+build: off