上海免费模板建站,给图像做标注的网站,嘉定企业网站制作,一二三四在线观看视频韩国ECMA进阶 ES6项目实战前期介绍SSRpnpm 包管理工具package.json 项目搭建初始化配置引入encode-fe-lint 基础环境的配置修改package.jsonbabel相关tsconfig相关postcss相关补充scripts脚本webpack配置base.config.tsclient.config.tsserver.config.ts src环境server端#xff1… ECMA进阶 ES6项目实战前期介绍SSRpnpm 包管理工具package.json 项目搭建初始化配置引入encode-fe-lint 基础环境的配置修改package.jsonbabel相关tsconfig相关postcss相关补充scripts脚本webpack配置base.config.tsclient.config.tsserver.config.ts src环境server端client端路由Home 构建过程SSR的好处 ES6项目实战
前期介绍
SSR
当页面首次加载时候spa只会返回空节点内容都是空的而ssr会将页面的骨架内容等提前加载出来提高效率。 spa首屏加载很慢。
SSR:利于首屏加载 CSR:(spa)不利于首屏加载页面结构为空节点
本次项目可以执行在浏览器也可以执行在客户端中
pnpm 包管理工具
构建速度快支持 monorepo高效率利用磁盘空间安全性比较高
package.json
build:run-s npm-run-all 执行多个npm脚本可并行、串行 build:server build:client 以上两个并行执行“preinstall”: “npx only-allow pnpm” 对安装包有限制只能使用pnpm包的分析借助analyze插件分析包依赖的大小可优化包的体积 项目搭建
初始化配置 npm init 引入encode-fe-lint npm install encode-fe-lint -gencode-fe-lint -g encode-fe-lint init 选择 React项目(TypeScript)只需要prettierrc
encode-fe-lint-scan:对代码进行扫描 encode-fe-lint-fix:对当前代码进行修复
pre-commit:触发代码扫描 commit-msg:触发扫描
package.json:
基础环境的配置
修改package.jsonreact- 使用 babel 通过babel插件 babel.config.js或者 .babelrc将jsx、tsx代码转译tsconfig相关的配置postcss 给css能力增强webpack配置client端、server端用的cross-env
修改package.json
全局 去掉version - private:“true”去掉 main scripts脚本 去掉 test增加 “preinstall”: “npx only-allow pnpm”, “prepare”: “husky install”, “init”:“pnpm install”, engines “node”: “12”, “npm”:“6” 引入依赖devDependencies,dependencies
引入好后执行命令安装 pnpm run init 如果报关于husky的错执行下面代码再重新安装 git init {name: es6-demo,private: true,description: ,scripts: {preinstall: npx only-allow pnpm,prepare: husky install,init:pnpm install,encode-fe-lint-scan: encode-fe-lint scan,encode-fe-lint-fix: encode-fe-lint fix},engines: {node: 12,npm:6},
devDependencies: {...},dependencies: {...},author: echo,license: ISC,husky: {hooks: {pre-commit: encode-fe-lint commit-file-scan,commit-msg: encode-fe-lint commit-msg-scan}}
}
babel相关
创建babel.config.js文件
module.exports (api) {const isWeb api.caller((caller) caller caller.target isWeb);return {presets: [[babel/env, //解决高版本语法但是低版本不能兼容的问题],babel/typescript,[babel/react,{runtime: automatic, //对jsx解析有两个版本1.传统的React.createElement 将jsx转为虚拟dom// 2.classic},],],//预设 [react相关的预设] //插件是对一些api的实现例如不支持async/await的浏览器将他们的实现提前加载进来plugins: [loadable/babel-plugin, babel/plugin-transform-runtime],env: {development: { // react-refreshplugins: isWeb ? [react-refresh/babel] : undefined,},},};
};
tsconfig相关 tsc -init {compilerOptions: {sourceMap: true,target: es5, //目标环境 es5module: commonjs,lib: [dom, dom.iterable, esnext],jsx: react-jsx,// Specify module resolution strategy: node (Node.js) or classic (TypeScript pre-1.6)moduleResolution: node,// Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports.// Implies allowSyntheticDefaultImports. Recommended by TSesModuleInterop: true,// Skip type checking of declaration files. Recommended by TSskipLibCheck: true,// Disallow inconsistently-cased references to the same file. Recommended by TSforceConsistentCasingInFileNames: true,// Do not emit outputsnoEmit: true,// Raise error on expressions and declarations with an implied any typenoImplicitAny: false,// Report errors on unused localsnoUnusedLocals: true,// Report errors on unused parametersnoUnusedParameters: true,// Report error when not all code paths in function return a valuenoImplicitReturns: true,// Report errors for fallthrough cases in switch statementnoFallthroughCasesInSwitch: true}
}
postcss相关
创建postcss.config.js文件
module.exports{plugins:[require(autoprefixer)]
}
package.json:
browerslist:[1%,last 2 versions],适配以下浏览器
补充scripts脚本 webpack配置
建立webpack目录
base.config.ts client.config.ts server.config.ts src环境 server端
使用express启动一个服务再返回一个html回去 将数据放到window上
client端
从window上获取数据__INITIAL_STATE__。避免client再加载首屏数据createStore用到redux/toolkit它是state和router的集合渲染客户端入口 到 react-view上
路由
使用Helmet因为支持client和server
Home
使用ErrorBoundary使得代码变得健壮性
构建过程
选择什么生态Vue、React React依赖 react react-dom react-router redux构建工具的选择 webpack、rollup、vitewebpack、plugins、loaders开始构建
SSR的好处
利于seo利于首屏渲染server输出htmlclient加载 js 补全事件两者结合才能实现快速渲染正常交互
