diff --git a/.babelrc b/.babelrc
index fde56ef..9081b3b 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,16 +1,16 @@
{
"presets": [
- ["env", {
+ ["@babel/preset-env", {
"modules": false
}],
- "react",
- "stage-0"
+ "@babel/preset-react",
],
"plugins": [
- ["import",
- { "libraryName": "antd", "style": true }
- ],
- "transform-runtime",
- "transform-decorators-legacy"
+ ["import", { "libraryName": "antd", "style": true }, "antd"],
+ ["import", { "libraryName": "@alifd/next", "style": true }, "@alifd/next"],
+
+ ["@babel/plugin-transform-runtime",{"corejs": 2}],
+ ["@babel/plugin-proposal-decorators", { "legacy": true }],
+ ["@babel/plugin-proposal-class-properties", { "loose": true }]
]
}
\ No newline at end of file
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
new file mode 100644
index 0000000..793aaf8
--- /dev/null
+++ b/.github/workflows/main.yml
@@ -0,0 +1,60 @@
+# This is a basic workflow to help you get started with Actions
+
+name: CI
+
+# Controls when the action will run. Triggers the workflow on push or pull request
+# events but only for the master branch
+on:
+ push:
+ branches: [ typescript ]
+ pull_request:
+ branches: [ master ]
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+ code_quality:
+ runs-on: ubuntu-lates
+ steps:
+ - uses: actions/checkout@v2
+ - uses: actions/setup-node@v1
+ with:
+ node-version: 12
+ registry-url: https://registry.npmjs.org/
+ - name: lint
+ run: npm run lint
+ env:
+ CI: true
+
+ # 当 merge_requests 执行 tsc 类型检查
+ check_types:
+ runs-on: ubuntu-lates
+ steps:
+ - uses: actions/checkout@v2
+ - uses: actions/setup-node@v1
+ with:
+ node-version: 12
+ registry-url: https://registry.npmjs.org/
+ - name: check-types
+ run: npm run check-types
+ env:
+ CI: true
+
+ # This workflow contains a single job called "build"
+ build:
+ # The type of runner that the job will run on
+ runs-on: ubuntu-latest
+
+ # Steps represent a sequence of tasks that will be executed as part of the job
+ steps:
+ # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+ - uses: actions/checkout@v2
+
+ # Runs a single command using the runners shell
+ - name: Run a one-line script
+ run: echo Hello, world!
+
+ # Runs a set of commands using the runners shell
+ - name: Run a multi-line script
+ run: |
+ echo Add other actions to build,
+ echo test, and deploy your project.
diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
new file mode 100644
index 0000000..861e372
--- /dev/null
+++ b/.github/workflows/npm-publish.yml
@@ -0,0 +1,47 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+ release:
+ types: [created]
+
+jobs:
+ build:
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v2
+ - uses: actions/setup-node@v1
+ with:
+ node-version: 12
+ - run: npm ci
+ - run: npm test
+
+ publish-npm:
+ needs: build
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v2
+ - uses: actions/setup-node@v1
+ with:
+ node-version: 12
+ registry-url: https://registry.npmjs.org/
+ - run: npm ci
+ - run: npm publish
+ env:
+ NODE_AUTH_TOKEN: ${{secrets.npm_token}}
+
+ publish-gpr:
+ needs: build
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v2
+ - uses: actions/setup-node@v1
+ with:
+ node-version: 12
+ registry-url: https://npm.pkg.github.com/
+ - run: npm ci
+ - run: npm publish
+ env:
+ NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
diff --git a/README.md b/README.md
index b08fa5a..01e0d66 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,64 @@
# my-react
-尝试搭建脚手架
+react-webpack脚手架，参考pc-react-ant.design + 云日志 + 各种文档
+
+==========================
+
+### typescript-react
+```text
+ typescript 的 在分支typescript下
+```
+
+==========================
+
+#### 新增fusion design
+1. 安装依赖
+```
+yarn add @alifd/next
+
+// 主题包
+yarn add @alifd/theme-4
+yarn add @alifd/next-theme-loader @alifd/next-theme-webpack-plugin
+
+```
+2. 按需引入配置
+(1) babel配置修改
+```
+"plugins": [
+ ["import",[
+ { "libraryName": "antd", "style": true },
+ { "libraryName": "@alifd/next", "style": true }
+ ]],
+ ...
+]
+```
+(2) webpack 配置
+```
+module: {
+ rules: [
+ {
+ test: /\.scss$/,
+ use: [
+ ...
+ '@alifd/next-theme-loader?{"theme":"@alifd/theme-4"}' // 主题包
+ ]
+ },
+ ...
+ ]
+},
+plugins: [
+ new ThemePlugin({ theme: '@alifd/theme-4' }), // 主题包
+ ...
+]
+
+```
+3. 注意点
+```
+官方文档在主题包css文件按需引入的webpack配置中用了extract-text-webpack-plugin
+但这个插件默认安装的版本是不支持webpack4.x的，但他又一个4.0的beta版本支持webpack4.x
+因此 yarn add extract-text-webpack-plugin@next -D
+
+```
+
+
+
+
diff --git a/build/dev.js b/build/dev.js
index ba4afa8..d1d27b7 100644
--- a/build/dev.js
+++ b/build/dev.js
@@ -1,15 +1,16 @@
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
-// const CopyWebpackPlugin = require('copy-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
const buildPath = path.resolve(__dirname, '../dist');
+const ThemePlugin = require('@alifd/next-theme-webpack-plugin');
// const theme = require('../antd-theme.js');
module.exports = {
mode:'development',
devtool: 'cheap-module-eval-source-map',
context:path.resolve(__dirname, '../src'), // 解析起点
entry:{
- vendor: ['react'],
+ vendor: ['react', 'react-dom', 'react-router', 'moment'],
app: ['./main.js']
},
output: {
@@ -36,7 +37,7 @@ module.exports = {
test: /\.js|jsx$/,
exclude: /node_modules/, // exclude不包括，include只命中
use:['babel-loader?cacheDirectory'],
- // use: { // 这算是第二种写法，和上面的意义是一样的
+ // use: { // 这算是第二种写法，和上面的意义是一样的
// loader: 'babel-loader',
// options: {
// cacheDirectory:true
@@ -46,18 +47,19 @@ module.exports = {
{
test: /\.(less|css)$/,
use: [
- 'style-loader',
- 'css-loader',
- 'less-loader'
- // 'less-loader?{modifyVars:'+JSON.stringify(theme)+'}'
- ],
+ 'style-loader',
+ 'css-loader',
+ 'less-loader'
+ // 'less-loader?{modifyVars:'+JSON.stringify(theme)+'}'
+ ],
},
{
test: /\.(scss|sass)$/,
use: [
'style-loader', //上面的简写方式
'css-loader',
- 'sass-loader'
+ 'sass-loader',
+ '@alifd/next-theme-loader?{"theme":"@alifd/theme-4"}'
]
},
{
@@ -70,16 +72,23 @@ module.exports = {
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
+ hash: false,
+ chunksSortMode:'none',
+ title:'webpack-react',
+ assets: {
+ favicon: '/images/favicon.ico',
+ config_js: '/config/conf.dev.js'
+ }
}),
new webpack.NamedModulesPlugin(),
- // new webpack.HotModuleReplacementPlugin(),
- // new CopyWebpackPlugin([
- // {from: path.resolve(__dirname,'../public/config'),to:'config'},
- // {from: path.resolve(__dirname,'../public/mock'),to:'mock'},
- // {from: path.resolve(__dirname,'../public/images'),to:'images'},
- // {from: path.resolve(__dirname,'../public/fonts'),to:'fonts'},
- // {from: path.resolve(__dirname,'../public/pages'),to:'pages'}
- // ])
+ new webpack.HotModuleReplacementPlugin(),
+ new webpack.DefinePlugin({__PRODUCTION: JSON.stringify(false)}),
+ new CopyWebpackPlugin([
+ {from: path.resolve(__dirname,'../public/images'),to:'images'},
+ {from: path.resolve(__dirname,'../public/config'),to:'config'},
+ {from: path.resolve(__dirname,'../public/fonts'),to:'fonts'},
+ ]),
+ new ThemePlugin({ theme: '@alifd/theme-4' }),
],
devServer: {
host: '0.0.0.0',
@@ -87,16 +96,15 @@ module.exports = {
contentBase: buildPath,
publicPath: '/',
historyApiFallback: true,
- // disableHostCheck: true,
- // compress: true,
- // hot: true, // 开启模块热替换功能
- // inline:true, // 自动刷新网页实现实时预览
- // proxy: [{
- // path: '/api',
- // // target: 'http://172.16.0.98:8788',//本地
- // target: 'http://47.101.183.209:8788',//测试
- // changeOrigin: true
- // }]
+ disableHostCheck: true,
+ compress: true,
+ hot: true, // 开启模块热替换功能
+ inline:true, // 自动刷新网页实现实时预览
+ proxy: [{
+ path: '/users',
+ target: 'https://api.github.com',//测试
+ changeOrigin: true
+ }]
}
};
diff --git a/build/prod.js b/build/prod.js
index d17504e..078a157 100644
--- a/build/prod.js
+++ b/build/prod.js
@@ -1,5 +1,6 @@
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
const buildPath = path.resolve(__dirname, '../dist');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
@@ -9,8 +10,8 @@ module.exports = {
mode:'production',
context:path.resolve(__dirname, '../src'), // 解析起点
entry:{
- vendor: ['react'],
- app: ['./main.js']
+ vendor: ['react', 'react-dom', 'react-router', 'moment'],
+ app: ['babel-polyfill','./main.js']
},
output: {
path: buildPath, // 输出文件存放在本地的目录
@@ -102,20 +103,27 @@ module.exports = {
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
+ hash: false,
+ chunksSortMode:'none',
+ title:'webpack-react',
+ assets: {
+ favicon: '/images/favicon.ico',
+ config_js: '/config/conf.prod.js'
+ }
}),
- new webpack.NamedModulesPlugin(),
new webpack.optimize.OccurrenceOrderPlugin(true),
new MiniCssExtractPlugin({
filename: 'css/[name].[hash].css',
chunkFilename: 'css/[name].[hash].css'
}),
- // new CopyWebpackPlugin([
- // {from: path.resolve(__dirname,'../public/config'),to:'config'},
- // {from: path.resolve(__dirname,'../public/mock'),to:'mock'},
- // {from: path.resolve(__dirname,'../public/images'),to:'images'},
- // {from: path.resolve(__dirname,'../public/fonts'),to:'fonts'},
- // {from: path.resolve(__dirname,'../public/pages'),to:'pages'}
- // ]),
+ new CopyWebpackPlugin([
+ {from: path.resolve(__dirname,'../public/images'),to:'images'},
+ {from: path.resolve(__dirname,'../public/config'),to:'config'},
+ // {from: path.resolve(__dirname,'../public/mock'),to:'mock'},
+ // {from: path.resolve(__dirname,'../public/images'),to:'images'},
+ {from: path.resolve(__dirname,'../public/fonts'),to:'fonts'},
+ // {from: path.resolve(__dirname,'../public/pages'),to:'pages'}
+ ]),
new webpack.DefinePlugin({
__PRODUCTION: JSON.stringify(true)
}),
diff --git a/create/newFile.js b/create/newFile.js
new file mode 100644
index 0000000..37106c2
--- /dev/null
+++ b/create/newFile.js
@@ -0,0 +1,89 @@
+const fs = require('fs');
+const path = require('path');
+const readline = require('readline');
+
+const rl = readline.createInterface({
+ input: process.stdin,
+ output: process.stdout
+});
+let newName = '', newPath = '', template = '';
+
+// 重命名
+componentRename = (answer) => {
+ newName = answer;
+ newPath = path.resolve('./src/components/', newName);
+ template = `import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class ${newName} extends React.PureComponent{
+ static defaultProps = {
+
+ };
+ static propsTypes = {
+
+ };
+
+ render () {
+ return (
+
+ ${newName}
+
+ )
+ }
+}`
+}
+
+// 重命名
+pageRename = (answer) => {
+ newName = answer;
+ newPath = path.resolve('./src/pages/', newName);
+ template = `import React from 'react';
+
+export default class ${newName} extends React.PureComponent{
+ render () {
+ return (
+
+ ${newName}
+
+ )
+ }
+}`
+}
+
+// 输入组件名
+let promise = new Promise((resolve, reject) => {
+ rl.question('请输入'+ (process.argv[2] === 'component' ? '组件名': '文件名') + ': ' , (answer) => {
+ process.argv[2] === 'component' ? componentRename(answer) : pageRename(answer);
+ resolve();
+ });
+})
+
+// 新建文件夹
+let promise1 = () => new Promise((resolve, reject) => {
+ fs.mkdir(newPath, { recursive: false }, (err) => {
+ if (err) reject(err);
+ resolve("test2");
+ })
+})
+
+// 文件夹新建成功后，新建对应index文件
+let promise2 = () => new Promise((resolve, reject) => {
+ fs.writeFile(`${newPath}/index.js`, template, (err) => {
+ if(err) reject(err);
+ resolve('写入成功');
+ })
+})
+
+// 执行
+promise.then(promise1)
+.then(promise2)
+.then((res) => {
+ console.log(res)
+ rl.close();
+})
+.catch((res) => {
+ if (res.code === 'EEXIST') {
+ console.log("文件名已存在")
+ }
+ rl.close();
+})
\ No newline at end of file
diff --git a/package.json b/package.json
index 730244e..1f7c9e9 100644
--- a/package.json
+++ b/package.json
@@ -7,14 +7,21 @@
"dev": "webpack-dev-server --progress --colors --config ./build/dev.js",
"test-watch": "karma start --auto-watch --no-single-run",
"start": "npm run dev",
- "preview": "pushstate-server ./dist 1234"
+ "preview": "http-server dist/ -P https://api.github.com",
+ "new-component": "node ./create/newFile.js component",
+ "new-page": "node ./create/newFile.js page"
},
"dependencies": {
+ "@alifd/next": "^1.14.2",
+ "@alifd/theme-4": "^0.0.15",
+ "@alifd/theme-ice-orange": "^1.0.1",
+ "@types/react-grid-layout": "^0.16.7",
"antd": "^3.14.1",
- "lodash": "^4.17.11",
+ "lodash": "^4.17.15",
"mirror-creator": "^1.1.0",
"react": "^16.4.2",
"react-dom": "16.4.2",
+ "react-grid-layout": "^0.16.6",
"react-redux": "^5.0.5",
"react-router-dom": "^4.3.1",
"react-router-redux": "^4.0.8",
@@ -22,23 +29,29 @@
"redux-thunk": "^2.2.0"
},
"devDependencies": {
- "babel-core": "^6.26.0",
- "babel-loader": "^7.1.2",
- "babel-plugin-import": "^1.6.2",
- "babel-plugin-transform-decorators-legacy": "^1.3.4",
- "babel-plugin-transform-runtime": "^6.6.0",
- "babel-preset-env": "^1.6.0",
- "babel-preset-react": "^6.24.1",
- "babel-preset-stage-0": "^6.24.1",
- "babel-runtime": "^6.26.0",
+ "@alifd/next-theme-loader": "^1.3.1",
+ "@alifd/next-theme-webpack-plugin": "^1.0.1",
+ "@babel/core": "^7.5.5",
+ "@babel/plugin-proposal-class-properties": "^7.5.5",
+ "@babel/plugin-proposal-decorators": "^7.4.4",
+ "@babel/plugin-transform-runtime": "^7.5.5",
+ "@babel/polyfill": "^7.4.4",
+ "@babel/preset-env": "^7.5.5",
+ "@babel/preset-react": "^7.0.0",
+ "@babel/runtime": "^7.5.5",
+ "@babel/runtime-corejs2": "^7.5.5",
+ "@types/http-server": "^0.10.0",
+ "babel-loader": "^8.0.6",
+ "babel-plugin-import": "^1.12.0",
"copy-webpack-plugin": "^4.2.1",
"css-loader": "^0.28.7",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
+ "http-server": "^0.11.1",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"mini-css-extract-plugin": "^0.4.1",
- "node-sass": "^4.9.3",
+ "node-sass": "^4.13.0",
"optimize-css-assets-webpack-plugin": "^5.0.0",
"postcss-loader": "^2.1.6",
"pushstate-server": "^3.0.1",
diff --git a/public/config/conf.dev.js b/public/config/conf.dev.js
new file mode 100644
index 0000000..b5e50ba
--- /dev/null
+++ b/public/config/conf.dev.js
@@ -0,0 +1,3 @@
+var FRONT_CONF = {
+ TEST_LABEL: 'emmm?', //
+}
\ No newline at end of file
diff --git a/public/config/conf.prod.js b/public/config/conf.prod.js
new file mode 100644
index 0000000..b5e50ba
--- /dev/null
+++ b/public/config/conf.prod.js
@@ -0,0 +1,3 @@
+var FRONT_CONF = {
+ TEST_LABEL: 'emmm?', //
+}
\ No newline at end of file
diff --git a/public/fonts/iconfont.eot b/public/fonts/iconfont.eot
new file mode 100644
index 0000000..a2d27e2
Binary files /dev/null and b/public/fonts/iconfont.eot differ
diff --git a/public/fonts/iconfont.js b/public/fonts/iconfont.js
new file mode 100644
index 0000000..7d8ad0d
--- /dev/null
+++ b/public/fonts/iconfont.js
@@ -0,0 +1 @@
+!function(i){var c,t='',l=(c=document.getElementsByTagName("script"))[c.length-1].getAttribute("data-injectcss");if(l&&!i.__iconfont__svg__cssinject__){i.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}!function(c){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(c,0);else{var l=function(){document.removeEventListener("DOMContentLoaded",l,!1),c()};document.addEventListener("DOMContentLoaded",l,!1)}else document.attachEvent&&(t=c,a=i.document,e=!1,h=function(){e||(e=!0,t())},(o=function(){try{a.documentElement.doScroll("left")}catch(c){return void setTimeout(o,50)}h()})(),a.onreadystatechange=function(){"complete"==a.readyState&&(a.onreadystatechange=null,h())});var t,a,e,h,o}(function(){var c,l;(c=document.createElement("div")).innerHTML=t,t=null,(l=c.getElementsByTagName("svg")[0])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",function(c,l){l.firstChild?function(c,l){l.parentNode.insertBefore(c,l)}(c,l.firstChild):l.appendChild(c)}(l,document.body))})}(window);
\ No newline at end of file
diff --git a/public/fonts/iconfont.svg b/public/fonts/iconfont.svg
new file mode 100644
index 0000000..87e23be
--- /dev/null
+++ b/public/fonts/iconfont.svg
@@ -0,0 +1,53 @@
+
+
+
+
diff --git a/public/fonts/iconfont.ttf b/public/fonts/iconfont.ttf
new file mode 100644
index 0000000..01a9994
Binary files /dev/null and b/public/fonts/iconfont.ttf differ
diff --git a/public/fonts/iconfont.woff b/public/fonts/iconfont.woff
new file mode 100644
index 0000000..28ccd8a
Binary files /dev/null and b/public/fonts/iconfont.woff differ
diff --git a/public/fonts/iconfont.woff2 b/public/fonts/iconfont.woff2
new file mode 100644
index 0000000..e94ced7
Binary files /dev/null and b/public/fonts/iconfont.woff2 differ
diff --git a/public/images/favicon.ico b/public/images/favicon.ico
new file mode 100644
index 0000000..773d287
Binary files /dev/null and b/public/images/favicon.ico differ
diff --git "a/public/md/Babel 6.x \345\215\207\347\272\247\345\210\260 7.x \350\270\251\345\235\221.md" "b/public/md/Babel 6.x \345\215\207\347\272\247\345\210\260 7.x \350\270\251\345\235\221.md"
new file mode 100644
index 0000000..d964880
--- /dev/null
+++ "b/public/md/Babel 6.x \345\215\207\347\272\247\345\210\260 7.x \350\270\251\345\235\221.md"
@@ -0,0 +1,51 @@
+Babel 6.x 升级到 7.x 踩坑
+
+1. 先把包升一下，对照着npm看看，
+
+ 有个地方重视一下
+
+ babel-plugin-transform-decorators-legacy 在7.x 不使用，要替换成@babel/plugin-proposal-decorators
+
+ 
+
+2. .plugins[0] [1] must be an object, false, or undefined
+
+ https://www.jianshu.com/p/153437cf30ae
+
+ 最新的版本不支持数组形式了。
+
+ ```
+ "plugins": [
+ ["import", { "libraryName": "antd", "style": true }, "antd"],
+ ["import", { "libraryName": "@alifd/next", "style": true }, "@alifd/next"]
+ ]
+ ```
+
+3. 另外每个config后面需要加个name，否则报错
+
+ 
+
+
+
+4. As of v7.0.0-beta.55, we've removed Babel's Stage presets.
+
+ 从 Babel v7 开始，所有针对处于标准提案阶段的功能所编写的预设（stage preset）都已被弃用。
+
+ 原先是用了stage-0的，然后报错说已经被废弃，如果要使用原来的请参考以下balabala，但看到这篇
+
+ https://blog.meathill.com/js/some-tips-of-babel-preset-env-config.html
+
+ 以后的转译组件都只会放进 preset-env 包里，就不想改了。
+
+5. 安装@babel/plugin-proposal-class-properties
+
+ 
+
+5. 插件的顺序（这个真的是骚断腿）
+
+ 
+
+6. 然后 @babel/polyfill 这个要被废弃了，官网的没看懂怎么弄，我是参考了这个
+
+ https://blog.csdn.net/weixiaoderensheng/article/details/82993332
+
diff --git a/public/md/webpack.md b/public/md/webpack.md
new file mode 100644
index 0000000..869ce94
--- /dev/null
+++ b/public/md/webpack.md
@@ -0,0 +1,282 @@
+webpack dev & prod config
+
+还是比较浅的，并没有太深入，重新看了一遍文档，在之前的基础上补充了一些，
+
+（我之前有做笔记吗？？？好像没有吧）
+
+目录结构：
+
+1. 基础配置（以dev为例）
+2. prod 下的一些配置区别，还是上代码（部分）
+3. 总结
+
+参考文档：
+
+1.
+
+------
+
+### 基础配置（以dev为例）
+
+1. 这里直接贴代码然后注释吧，要详细些的话要写好多，在注释里写一些需要注意的地方吧
+
+ ```
+ const webpack = require('webpack');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const CopyWebpackPlugin = require('copy-webpack-plugin');
+ const path = require('path');
+ const buildPath = path.resolve(__dirname, '../dist');
+
+ module.exports = {
+ mode:'development', // "development" | "production" | "none"
+ // 选择模式 开发环境 or 生产环境
+
+ devtool: 'cheap-module-eval-source-map',
+ // 这个影响的是浏览器调试时，的source代码显示，一般推荐上面这个
+
+ context:path.resolve(__dirname, '../src'), // 解析起点
+
+ entry:{
+ vendor: ['react', 'react-dom', 'react-router', 'moment'],
+ // 第三方库vendor入口
+ // 使用vendor属性，将vendor中的代码抽离出来，原因如下：
+ // 是因为vendor.js中的内容基本上很少更新，当我们根据业务需求修改相关逻辑代码并重新生成入口文件时（比如app.js），vendor.js仍然在浏览器的缓存中，这时用户只需要重新下载新的入口文件即可。
+
+ app: ['babel-polyfill','./main.js'] // 应用程序入口
+ // 这里直接 app:'./main.js' 也是可以的，
+ // 前面加上babel-polyfill是为了将ES6的语法转为ES5，主要是为了一些低版本的不兼容的浏览器
+ // 现在浏览器基本都支持了（只要你是新版本），所以当时没有装babel-polyfill用ES6的语法显示的也很顺畅，
+ },
+
+ output: {
+ path: buildPath, // 输出文件存放在本地的目录
+ publicPath: '/', // 配置发布到线上资源的 URL 前缀
+ chunkFilename: 'js/[name].[hash].js', // 无入口的chunk在输出时的文件名称
+
+ filename: 'js/[name].[hash].js'
+ // 这里的[name] | [hash]都是模板，对应生成模块名称，唯一的 hash
+ // hash 和 chunkhash的长度还可以指定 [hash:8]
+ },
+
+ module: {
+ rules: [{ // 配置模块的读取和解析规则，通常用来配置 Loader
+ test: /\.js|jsx$/,
+ exclude: /node_modules/, // exclude不包括，include只命中
+ use:['babel-loader?cacheDirectory'],
+ // use: { // 这算是第二种写法，和上面的意义是一样的
+ // loader: 'babel-loader',
+ // options: {
+ // cacheDirectory:true
+ // }
+ // }
+ },
+ {
+ test: /\.(less|css)$/,
+ use: [
+ 'style-loader',
+ 'css-loader',
+ 'less-loader'
+ // 'less-loader?{modifyVars:'+JSON.stringify(theme)+'}'
+ ],
+ },
+ {
+ test: /\.(scss|sass)$/,
+ use: [
+ 'style-loader', //上面的简写方式
+ 'css-loader',
+ 'sass-loader'
+ ]
+ },
+ {
+ test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?[tv]=[\d.]+)*$/,
+ use: ['file-loader?name=[name].[ext]']
+ }
+ ]
+ },
+
+ plugins: [
+ new HtmlWebpackPlugin({
+ // 生成一个 HTML5 文件,
+ // 结合index.html来看，里面有对应的一些配置
+ // 另外要结合CopyWebpackPlugin，
+ filename: 'index.html',
+ template: 'index.html', // html5文件模板
+ hash: false,
+ chunksSortMode:'none',
+ assets: { // 一些参数，这些参数也可以移到外面去，
+ title:'webpack-react',
+ favicon: '/images/favicon.ico',
+ config_js: '/config/conf.dev.js'
+ }
+ }),
+
+ new CopyWebpackPlugin([
+ // 这个插件是将单个文件或整个目录复制到构建目录
+ // 在build后的dist文件夹下能看到对应构建的文件夹
+ {from: path.resolve(__dirname,'../public/images'),to:'images'},
+ {from: path.resolve(__dirname,'../public/config'),to:'config'},
+ ])
+ new webpack.NamedModulesPlugin(), // 热加载时直接返回更新文件名
+ new webpack.HotModuleReplacementPlugin(),
+ // 启用 HMR（热替换模块）配合使用的插件
+ // HMR只在dev下
+
+ new webpack.DefinePlugin({__PRODUCTION: JSON.stringify(false)}),
+ // 允许创建一个在编译时可以配置的全局常量
+ // 这里配置了一个常量__PRODUCTION, dev下为false, prod下为true
+ ],
+
+ resolve: { // 配置 Webpack 如何寻找模块所对应的文件
+ extensions: ['.js', '.jsx', '.scss', '.css', '.json'],
+ // 用于配置在尝试过程中用到的后缀列表
+
+ alias: { // 别名
+ '@':path.resolve(__dirname,'../src'),
+ 'public': path.resolve(__dirname, '../public'),
+ 'components': path.resolve(__dirname, '../src/components/'),
+ 'pages': path.resolve(__dirname, '../src/pages/'),
+ 'layout': path.resolve(__dirname, '../src/layout/')
+ }
+ },
+
+ externals :{
+ // 这是外部扩展，是被剥离出来的，不需要依赖模块也可以展示的
+ // 一般放的是静态的文件
+ 'FRONT_CONF': 'FRONT_CONF'
+ // 这个实践之后是，文件在html中引入，然后就可以当做是全局变量来使用
+ },
+
+ devServer: {
+ host: '0.0.0.0',
+ port: '8181',
+ contentBase: buildPath,
+ publicPath: '/',
+ historyApiFallback: true,
+ disableHostCheck: true,
+ compress: true,
+ hot: true, // 开启模块热替换功能
+ inline:true, // 自动刷新网页实现实时预览
+ proxy: [{ // 代理
+ path: '/users',
+ target: 'https://api.github.com',//测试
+ changeOrigin: true
+ }]
+ }
+ };
+
+ ```
+
+
+------
+
+### prod 下的一些配置区别，还是上代码（部分）
+
+1. 部分配置
+
+ ```
+ const webpack = require('webpack');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const CopyWebpackPlugin = require('copy-webpack-plugin');
+ const path = require('path');
+ const buildPath = path.resolve(__dirname, '../dist');
+ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+ const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+ const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+ module.exports = {
+ performance: { // 性能
+ hints: false,
+ },
+
+ optimization: { // 优化
+ runtimeChunk: {
+ name: 'manifest'
+ },
+ minimize: true,
+ noEmitOnErrors: true,
+ minimizer: [
+ // 这个插件反正就是压缩js代码的，为什么放在优化里我也不是很清楚，
+ // 优化这块的配置，不是很理解
+ new UglifyJsPlugin({
+ cache: true,
+ parallel: true,
+ sourceMap: false
+ }),
+ new OptimizeCSSAssetsPlugin({})
+ ],
+ splitChunks: {
+ minSize: 30000,
+ maxSize: 3000000,
+ minChunks: 1,
+ maxAsyncRequests: 5,
+ maxInitialRequests: 3,
+ name: true,
+ cacheGroups: {
+ vendor: {
+ chunks: 'initial',
+ name: 'vendor',
+ test: 'vendor'
+ },
+ echarts: {
+ chunks: 'all',
+ name: 'echarts',
+ test: /[\\/]echarts[\\/]/,
+ }
+ }
+ }
+ },
+
+ plugins: [
+ new HtmlWebpackPlugin({
+ filename: 'index.html',
+ template: 'index.html',
+ hash: false,
+ chunksSortMode:'none',
+ title:'webpack-react',
+ assets: {
+ favicon: '/images/favicon.ico',
+ config_js: '/config/conf.prod.js'
+ }
+ }),
+ new webpack.optimize.OccurrenceOrderPlugin(true),
+ // 我估摸这优化里配置的插件也是可以放在这里的，
+ // 如果放在优化里，就要用上这个插件，否则不用
+
+ new MiniCssExtractPlugin({
+ // 打包css文件的插件
+ filename: 'css/[name].[hash].css',
+ chunkFilename: 'css/[name].[hash].css'
+ }),
+ new CopyWebpackPlugin([
+ {from: path.resolve(__dirname,'../public/images'),to:'images'},
+ {from: path.resolve(__dirname,'../public/config'),to:'config'},
+ ]),
+ new webpack.DefinePlugin({
+ __PRODUCTION: JSON.stringify(true)
+ }),
+ ]
+ };
+
+
+ ```
+
+
+2. 运行生产环境需要放到服务器上，这里使用http-server搭建临时服务器
+
+ ```
+ "preview": "http-server dist/ -P https://api.github.com"
+ // -P后面是后端域名，（不然跨域会出问题
+ ```
+
+
+
+------
+
+
+
+### 总结
+
+1. 最后感觉就是，还是回到最原始的html开发，你有html, js, css, images等文件，对应的有这么一个目录结构。
+2. 现在就是说，为了更加方便开发，你使用了框架，使用了很多第三方的库，安装了各种依赖，用了不同的语法，但最终的目的是浏览器能够识别并展示。
+3. 为此你使用了一些loader去解析，让他变成浏览器能理解的语言。
+4. 而后你用了一些插件，去把项目打包成一个html（HtmlWebpackPlugin），而打包成的项目他也有自己的一个目录结构，你也可以通过CopyWebpackPlugin去指定
+5. 这样。
\ No newline at end of file
diff --git a/src/api/url.js b/src/api/url.js
index bd2428e..0f86417 100644
--- a/src/api/url.js
+++ b/src/api/url.js
@@ -1,10 +1,10 @@
export default {
getTheData:{
method:'get',
- url:'https://api.github.com/users/chriscoyier/repos'
+ url:'/users/chriscoyier/repos'
},
getErrData:{
method:'get',
- url:'https://api.github.com/users/chrissycoyier/repos'
+ url:'/users/chrissycoyier/repos'
}
}
\ No newline at end of file
diff --git a/src/components/gridLayout/index.js b/src/components/gridLayout/index.js
new file mode 100644
index 0000000..34a2f0e
--- /dev/null
+++ b/src/components/gridLayout/index.js
@@ -0,0 +1,48 @@
+import React from 'react'
+import RGL, { WidthProvider } from "react-grid-layout";
+import PropTypes from 'prop-types';
+import './style.scss';
+
+const ReactGridLayout = WidthProvider(RGL);
+const GRID_LAYOUT_WIDTH = 1200,
+ GRID_LAYOUT_COLS = 12,
+ GRID_LAYOUT_ROWHEIGHT = 20;
+
+export default class GridLayout extends React.PureComponent{
+ static defaultProps = {
+ className: 'layout',
+ isDraggable: true,
+ isResizable: true,
+ };
+ static propsTypes = {
+ className: PropTypes.string,
+ isDraggable: PropTypes.bool,
+ isResizable: PropTypes.bool,
+ layout: PropTypes.array,
+ onLayoutChange: PropTypes.func,
+ onResizeStop: PropTypes.func,
+ onDragStop: PropTypes.func,
+ }
+
+ render () {
+ const { layout, isDraggable, isResizable, onLayoutChange, onResizeStop, onDragStop, children} = this.props;
+ return (
+
+ {children}
+
+ )
+ }
+}
diff --git a/src/components/gridLayout/style.scss b/src/components/gridLayout/style.scss
new file mode 100644
index 0000000..12b9f6c
--- /dev/null
+++ b/src/components/gridLayout/style.scss
@@ -0,0 +1,5 @@
+@import '../../../node_modules/react-grid-layout/css/styles.css';
+@import '../../../node_modules/react-resizable/css/styles.css';
+.react-grid-item {
+ border: 1px solid;
+}
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index c7f3c39..819e339 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,12 +1,17 @@
-
+
-
-
-
-
- Document
-
-
-
-
+
+
+
+
+
+
+
+ <%= htmlWebpackPlugin.options.title %>
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/layout/mainLayout/style.scss b/src/layout/mainLayout/style.scss
index afaf8d4..5176ca9 100644
--- a/src/layout/mainLayout/style.scss
+++ b/src/layout/mainLayout/style.scss
@@ -19,6 +19,7 @@ body{
width:100%;
bottom: 69px;
top: 64px;
+ overflow-y: auto;
}
.footer{
position: absolute;
diff --git a/src/main.js b/src/main.js
index 9c42a57..13168f9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
-import { Routers } from './router'
-import store from './store'
+import { Routers } from './router';
+import store from './store';
+import './scss/index.scss'
const render = Component =>
ReactDOM.render(
diff --git a/src/pages/home/index.js b/src/pages/home/index.js
index c245cff..6e3b2ca 100644
--- a/src/pages/home/index.js
+++ b/src/pages/home/index.js
@@ -1,9 +1,125 @@
import React from 'react';
+import { Card, Button } from '@alifd/next';
+import _ from "lodash";
+import GridLayout from '@/components/gridLayout'
+
export default class Home extends React.PureComponent{
+ state = {
+ gridLayoutItem: [],
+ layout: [],
+ isCollect: false,
+ };
+
+ componentDidMount () {
+ this.generateLayout();
+ }
+
+ addComponent = () => {
+ const { gridLayoutItem } = this.state;
+ const index = gridLayoutItem.length == 0 ? 1 : gridLayoutItem[gridLayoutItem.length - 1].id + 1;
+ gridLayoutItem.push({
+ id: index,
+ title: "title" + index,
+ content: "content" + index
+ })
+ this.setState({ gridLayoutItem }, () => {
+ this.generateLayout()
+ })
+ }
+
+ onRemoveItem = (id) => {
+ const { gridLayoutItem, layout } = this.state;
+ this.setState({
+ gridLayoutItem: gridLayoutItem.filter(item => item.id !== id ),
+ }, () => {
+ this.generateLayout()
+ })
+ }
+
+ generateDOM() {
+ return this.state.gridLayoutItem.map((item, index) => {
+ return (
+
+
+ {item.title}
+ x
+
+
+ {item.content}
+
+
home
+
+
+
+
+
+
+
+ LOGO
+ 观看人数
+ 投币
+
+ 收藏
+ 点赞
+
+
+
+
+
+
+
+ {this.generateDOM()}
+
+
+