Skip to content

yinsang/FE-mvp

Folders and files

NameName
Last commit message
Last commit date

Latest commit

author
yinpeng.wyp
Feb 23, 2023
c4c93d8 · Feb 23, 2023

History

22 Commits
Sep 13, 2018
Sep 14, 2018
May 20, 2021
Feb 23, 2023
Nov 8, 2019
Sep 18, 2018
Nov 8, 2019
May 20, 2021
Feb 23, 2023
Sep 20, 2018
Nov 8, 2019
Sep 14, 2018
Nov 8, 2019
Sep 18, 2018
Nov 8, 2019
Sep 14, 2018
Nov 8, 2019
Sep 14, 2018
Sep 14, 2018
Sep 14, 2018
Nov 8, 2019
Nov 8, 2019
Sep 18, 2018
Nov 8, 2019
Feb 23, 2023

Repository files navigation

mvp =>Minimum Viable Product

最小可行方案

针对很多新人前端不明白现在的开发工具及框架如何使用,对各个技术栈做一个说明。

如果对前端哪些技术栈不熟悉,可以issue我添加

说明

进入每个目录,如果有package.json则需要先在该目录下在终端(cmd)里npm i一下

webpack、eslint需要全局npm安装

npm install -g eslint

npm install -g webpack-cli

npm install -g webpack

目录(按照难度先后顺序)

  1. react

    react js形式 非jsx

    react 可以不用npm包那一堆来写,react创建dom节点(虚拟),reactDOM去渲染成真实dom。

    reactDOM就是一个虚拟dom到真实dom的转换器

    react可以按照这种js的形式写,但是现代es6更推荐模块化,这时需要用es6的module(模块)

  2. vue

    vue js 形式 非单文件

    比react 更好明白了。

    定义了全局Vue的类,然后new 了一个实例。对dom进行改造编译渲染了message进行数据绑定

  3. typescript

    仅运行ts demo

    npm install -g typescript

    全局安装ts

    tsc --init 会生成tsconfig.json文件 'tsc' 会把ts编译成index.js文件

  4. babel

    仅展示babel运作模式 npm i npm install -g babel-cli npm run babel-build 打开index.html

    babel 命令需要安装在-g环境才能用babel的命令行

    babel是个编译器,能把你的js代码编译成其他版本js,至于编译成什么版本的js需要一个.babelrc来规定。

    所以需要安装babel-preset-env,再再.babelrc里写明用这个预先布置

    npm run babel-build是执行package.json里的scripts,为了生成可执行的index.dist.js

  5. webpack-demo

    执行webpack的最小模式

    在命令行执行:webpack

    execute 【webpack】 in commander

  6. webpack-babel

    webpack+babel

    演示babel-loader运行模式 npm i

    webpack babel会吧es6的扩展...编译成es5,可以看dist文件查看

    you need to add .babelrc file for babel rules, and webpack.config.js for webpack rules. babel-loader is a way for webpack when using babel.

  7. vue-webpack

    webpack + vue-loader + webpack-dev-server

    在webpack中用vue-loader编译vue单文件 有webpack-dev-server帮助开发

    single-file-components vue单文件组件

    npm i

    webpack 配置已完成打包工作

    webpack

    webpack-dev-server可以用npm run dev打开

    npm run dev

    为了引入方便 dev生成的/dist/main.js 和webpack build的main.js 放在一个文件夹。 dev生成的main.js 其实在内存中,不在文件中显示

  8. react-webpack-eslint

    webpack + babel-loader + webpack-dev-server + eslit 包括eslint plugin的使用等

  9. vue-webpack-eslint

    webpack + +babel-loader + vue-loader + webpack-dev-server + eslint 包括eslint plugin的使用等

  10. vue-webpack-eslint-typescript

    webpack + +babel-loader + vue-loader + webpack-dev-server + eslint + typescript

    vue的ts支持暂时用

    vue-property-decorator,因为ts对vue的this识别很困难,后期vue+ts兼容较好时可以废弃vue-property-decorator 重要强调: ts里的target:'es5'会把ts文件里的es6编译成es5,也会把vue单文件中的lang="ts"编译成es5 但是如果vue里用script用普通es6,则需要babel来支持,不然vue里的es6还是es6.

  11. react-webpack-eslint-typescript

    webpack + +babel-loader + webpack-dev-server + eslint + typescript 事实证明react比vue对ts的支持好太多了啊,摔!

  12. webpack-babel-unitTest

    babel 需要用2015,用env会导致babel版本错误。这是个bug吧。

    ps: mocha等单元测试的内容请上网自己搜,阮一峰mocha

    es6需要babel来编译,chai是断言库,mocha是测试框架

  13. js-unitTest-karma-webpack es6的单元测试demo karma+mocha+webpack+chrome 坑点: 有时未报错,但是运行不成功,chrome里的debug按钮点击一下,进入debut.html 打开控制台,你就看到错误信息了!!!!!!

    • files囊括需要包含的文件 例如'unit/**/*.test.js'
    • preprocessors是预处理,需要用webpack进行配置
    • webpack 的打包和webpack官网一致 还可以根据需求加入coverage等信息。
  14. vue-unitTest-karma-webpack vue + webpack + karma + mocha + chai集大成者 注意files 和preprocessors的配置

  15. react-webpack-eslint-karma-unitTest react + webpack + karma + enzyme + unitTest 用常用的enzme对react进行单元测试。具体props等功能请看github