网站浏览器图标怎么做中国十大设计名校

网站浏览器图标怎么做,中国十大设计名校,营销网站的关键字,眼科医院网站开发项目模板 模板地址 如果急用#xff0c;直接使用当前模板即可。点击右上角Use This Template即可创建一个新的项目。 背景 当我每每创建一个新的webpack项目时#xff0c;总是需要经过繁琐的webpack配置来完成项目的init。如果从网络上搜寻快速的setup总会遇到各种各样的问…项目模板模板地址如果急用直接使用当前模板即可。点击右上角Use This Template即可创建一个新的项目。背景当我每每创建一个新的webpack项目时总是需要经过繁琐的webpack配置来完成项目的init。如果从网络上搜寻快速的setup总会遇到各种各样的问题由于包的版本有更新有些配置已经废弃掉了所有我决定搭建自己的webpack配置模板。搭建步骤1. pnpm 开启webpack项目1.1 生成package.jsonpnpminit1.2 引入webpackpnpmadd-D webpack webpack-cli webpack-dev-server1.3 引入typescriptpnpmadd-D typescript ts-node types/node1.4 引入reactpnpmaddreact react-dompnpmadd-D types/react types/react-dom2. 初始化react代码2.1 创建src/app.tsxconstApp(){returndivHello World/div}exportdefaultApp2.2 创建src/index.tsximport{createRoot}fromreact-dom/clientimportAppfrom./appcreateRoot(document.getElementById(root)!).render(App/)3. webpack配置3.1 创建webpack.config.tsimportpathfrompathimport{fileURLToPath}fromurlimporttype{Configuration}fromwebpackconstrootDirpath.dirname(fileURLToPath(import.meta.url))constconfig:Configuration{entry:./src/index.tsx,output:{path:path.resolve(rootDir,dist),filename:[name].[contenthash].js},resolve:{extensions:[.ts,.tsx,.js,.jsx]},devtool:source-map,module:{},mode:development}exportdefaultconfig3.2 设置webpack插件pnpmadd-D html-webpack-plugin clean-webpack-plugin在public下创建index.html!doctypehtmlhtmllangenheadmetacharsetUTF-8/metanameviewportcontentwidthdevice-width, initial-scale1.0/titleWebpack React Template/title/headbodydividroot/div/body/htmlwebpack 补充插件配置以及devServer配置importpathfrompathimport{fileURLToPath}fromurlimportHtmlWebpackPluginfromhtml-webpack-pluginimport{CleanWebpackPlugin}fromclean-webpack-pluginimporttype{Configuration}fromwebpackimportwebpack-dev-serverconstrootDirpath.dirname(fileURLToPath(import.meta.url))constconfig:Configuration{entry:./src/index.tsx,output:{path:path.resolve(rootDir,dist),filename:[name].[contenthash].js},resolve:{extensions:[.ts,.tsx,.js,.jsx]},plugins:[newHtmlWebpackPlugin({template:./public/index.html}),newCleanWebpackPlugin()],devtool:source-map,devServer:{static:{directory:path.join(rootDir,public)},compress:true,historyApiFallback:true},mode:development}exportdefaultconfig3.3 设置webpack loader(style)pnpmadd-D style-loader css-loader sass sass-loader引入到webpack config的rules中constconfig:Configuration{entry:./src/index.tsx,output:{path:path.resolve(rootDir,dist),filename:[name].[contenthash].js},resolve:{extensions:[.ts,.tsx,.js,.jsx]},plugins:[newHtmlWebpackPlugin({template:./public/index.html}),newCleanWebpackPlugin()],devtool:source-map,module:{rules:[{test:/\.css$/i,use:[style-loader,css-loader]},{test:/\.scss$/i,use:[style-loader,css-loader,sass-loader]},{test:/\.(png|jpg|jpeg|gif|svg)$/i,type:asset/resource}]},devServer:{static:{directory:path.join(rootDir,public)},compress:true,historyApiFallback:true},mode:development}exportdefaultconfig这里还引入静态资源的rules直接从asset/resource中获取。因为我们引入了sass这里我们还需要定义sass文件.sass,.scss)的模块类型,在src/types里创建index.d.ts:declaremodule*.scss{constcontent:{[className:string]:string}exportdefaultcontent}3.4 设置webpack babelpnpmadd-D babel/core babel/preset-env babel/preset-react babel/preset-typescript babel-loader在config进行如下配置importpathfrompathimport{fileURLToPath}fromurlimportHtmlWebpackPluginfromhtml-webpack-pluginimport{CleanWebpackPlugin}fromclean-webpack-pluginimporttype{Configuration}fromwebpackimportwebpack-dev-serverconstrootDirpath.dirname(fileURLToPath(import.meta.url))constconfig:Configuration{entry:./src/index.tsx,output:{path:path.resolve(rootDir,dist),filename:[name].[contenthash].js},resolve:{extensions:[.ts,.tsx,.js,.jsx]},plugins:[newHtmlWebpackPlugin({template:./public/index.html}),newCleanWebpackPlugin()],devtool:source-map,module:{rules:[{test:/\.(ts|js)x?$/,exclude:/node_modules/,use:[{loader:babel-loader,options:{presets:[babel/preset-env,[babel/preset-react,{runtime:automatic}],babel/preset-typescript]}}]},{test:/\.css$/i,use:[style-loader,css-loader]},{test:/\.scss$/i,use:[style-loader,css-loader,sass-loader]},{test:/\.(png|jpg|jpeg|gif|svg)$/i,type:asset/resource}]},devServer:{static:{directory:path.join(rootDir,public)},compress:true,historyApiFallback:true},mode:development}exportdefaultconfig4. typescript配置根目录上创建tsconfg.json{compilerOptions:{module:esnext,target:esnext,moduleResolution:bundler,lib:[dom,dom.iterable,esnext],sourceMap:true,declaration:true,declarationMap:true,noUncheckedIndexedAccess:true,exactOptionalPropertyTypes:true,strict:true,jsx:react-jsx,jsxImportSource:react,verbatimModuleSyntax:true,isolatedModules:true,noUncheckedSideEffectImports:true,moduleDetection:force,skipLibCheck:true}}通过上述配置我们修改package.json的scriptsscripts:{start:webpack serve --open --port 3210,build:webpack}此时运行pnpm run start即可在3210端口访问项目。接下来的内容是锦上添花优化工程即代码风格格式化typescript eslint规则校验使用git hooks触发生命周期钩子5. 使用prettier格式化代码pnpmadd-D prettier在根目录创建.prettierrc{semi:false,singleQuote:true,trailingComma:none,tabWidth:4,useTabs:false,printWidth:120,bracketSpacing:true,arrowParens:avoid,endOfLine:auto}在package.json配置格式化脚本scripts:{start:webpack serve --open --port 3210,build:webpack,format:prettier --write \src/**/*.{js,jsx,ts,tsx,json,css,md}\},执行即可把src中所有代码文件格式化6. 配置eslintpnpmadd-D eslint typescript-eslint eslint-plugin-react eslint-plugin-react-hooks eslint-webpack-plugin根目录创建eslint.config.jsimporttseslintfromtypescript-eslintimportreactPluginfromeslint-plugin-reactimportreactHooksfromeslint-plugin-react-hooksexportdefault[...tseslint.configs.recommended,{files:[**/*.{ts,tsx}],plugins:{react:reactPlugin,react-hooks:reactHooks},rules:{...reactPlugin.configs.recommended.rules,...reactHooks.configs.recommended.rules},settings:{react:{version:detect}}}]在packages的scripts脚本中写入scripts:{start:webpack serve --open --port 3210,build:webpack,format:prettier --write \src/**/*.{js,jsx,ts,tsx,json,css,md}\,lint:eslint --ext .ts,.tsx,lint:fix:eslint --ext .ts,.tsx --fix},7. husky 设置lint-stagedpnpmadd-D husky lint-staged7.1 初始化git仓库gitinit7.2 初始化huskynpx方式npx husky initpnpm方式pnpmexechusky init7.3 配置husky的pre-commit钩子在.husky中创建pre-commit无后缀文件写入npx lint-staged并在package.json中的根object里写入lint-staged配置lint-staged:{src/**/*.{ts,tsx}:[eslint --fix]}此时每当你git commit的时候它都会先执行eslint8. husky设置commit message为了规范每次提交记录的message我们使用commitlint规范feat: add new feature fix: bug fix docs: documentation changes style: formatting changes refactor: code refactoring test: adding tests chore: maintenance tasks引入commit-lintpnpmadd-D commitlint/cli commitlint/config-conventional创建commitlint.config.jsexportdefault{extends:[commitlint/config-conventional]}在.husky目录中创建commit-msg无后缀文件并写入pnpmexeccommitlint --edit$1此后后续的commit提交的message都会匹配是否以上述规范中的lint的title相匹配比如我提交一个需求必须以feat:开头9. 创建.gitignore屏蔽掉常见的本地配置/依赖项# Dependencies node_modules .pnpm-store # Build output dist # IDE .idea .vscode *.swp *.swo # OS .DS_Store Thumbs.db # Logs *.log npm-debug.log* # Environment .env .env.local .env.*.local