毕设相关

vs code 使用介绍

链接
wobuaichiliz
WOwo20110609

任务一预览链接

链接

压缩bundle.js

• 参考

• webpack 自带了一个压缩插件 UglifyJsPlugin，只需要在配置文件中引入即可

var webpack = require('webpack')
var path = require("path")

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
}

• bundle.js里面的这个函数并不复杂，你可以看看一每一行在做什么，大概就是把各个模块 call 一下，然后把模块存到 installedModules 里，方便其他模块使用。
• dist/bundle.js 有接近 800kb，因为我们引入了 underscore 和 jQuery 却没有压缩（应该叫做混淆）代码，那么如何压缩呢？方法很多，其中最简单的一种就是改 build 脚本

   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "webpack"
+    "build": "webpack -p"
   },
-p的含义
运行 ./node_modules/.bin/webpack --help
 -p           shortcut for --optimize-minimize --define
               process.env.NODE_ENV="production"   

 

任务二连接

链接

增删改查

将组件写到一个单独的文件里

import React from 'react'; // 为什么要 import React   引入react
class Welcome extends React.Component {
  render() {
    return 
Hello, Component
;
  }
}

export default Welcome // 为什么要 export，为什么要加 default
export 语句 用于从给定的文件 (或模块) 中导出函数，对象常量，有两种不同的导出方式
- 命名导出：
export { myFunction }; // 导出一个函数声明
export const foo = Math.sqrt(2); // 导出一个常量
- 默认导出 (每个脚本只能有一个)：
export default myFunctionOrClass // 或者 'export default class {}'
- 对于只导出一部分值来说，命名导出的方式很有用。在导入时候，可以使用相同的名称来引用对应导出的值。

- 关于默认导出方式，每个模块只有一个默认导出。一个默认导出可以是一个函数，一个类，一个对象等。当最简单导入的时候，这个值是将被认为是”入口”导出值。

• 关于 setState 你一定要看这篇文章：

https://zhuanlan.zhihu.com/p/2595447078

任务三

预览