Create-React-App

关于create-react-app:craco是如何实现对非moduleless文件开启css-modules的

创立了两个loader，别离是lessRule和lessModuleRule，这两个loader外面都开启了css modules。 lessRule的css modules配置 lessModuleRule的css modules配置

关于create-react-app:craco使用问题记录

如何配置less?// craco.config.jsconst CracoLessPlugin = require('craco-less');module.exports = { plugins: [ { plugin: CracoLessPlugin, options: { cssLoaderOptions: { modules: { localIdentName: '[local]_[hash:base64:5]' }, }, }, }, ],};如何配置门路别名（alias）// craco.config.jsconst path = require('path');module.exports = { webpack: { alias: { '@': path.resolve(__dirname, 'src'), }, },};

关于create-react-app:createreactapp脚手架搭建chrome插件项目

背景上篇文章《前端我的项目本地调试计划》中讲到开发chrome拓展插件帮忙实现Cookie复制，从而实现本地我的项目调试。但插件采纳的是原生JS开发的，本文来探讨如何在我的项目中引入React？我的项目实际首先，执行上面命令初始化我的项目 create-react-app chrome-extension --template typescript创立的我的项目构造如下：将红色圈出的文件删除，调整的构造如下：批改pubic文件夹中manifest.json配置文件，增加须要应用的图标、权限，整体配置如下： { "manifest_version": 2, // 为2时默认开启内容安全策略 "name": "debug", "description": "前端我的项目调试工具", "version": "1.0.0", "icons": { "16": "/images/icon16.png", "32": "/images/icon32.png", "48": "/images/icon48.png", "128": "/images/icon128.png" }, "permissions": [ "cookies", "tabs", "http://*/*", "https://*/*", "storage" ], "browser_action": { "default_icon": { "16": "/images/icon16.png", "32": "/images/icon32.png", "48": "/images/icon48.png", "128": "/images/icon128.png" }, "default_popup": "index.html" // 弹窗页面 }, "content_security_policy": "script-src 'self'; object-src 'self'" // 内容安全策略（CSP）}删除index.html中文件的援用，调整后如下： <!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> </body></html>在public中增加images目录寄存图标： ...

关于create-react-app:如何生成一个react-项目

环境要求：有装置node和npm，没有装置的话，能够参考以下链接 https://segmentfault.com/a/1190000038536950接下来，生成一个react 我的项目：全局装置create-react-app npm install create-react-app -g抉择我的项目目录，运行以下命令, projectname 是我的项目的名字 creacte-react-app projectname 进入到我的项目目录，运行npm run start在浏览器输出http://localhost:3000/,呈现以下界面：至此，曾经ok了

关于create-react-app:createreactapp脚手架搭建后如何使项目支持修饰器语法

create-react-app搭建react我的项目后，是不反对润饰器语法的。react-scripts库曾经提供了打包cli命令以及惯例的构建配置，如果须要应用一些应用时个性，比方润饰器等，须要另外注入正好，官网提供react-app-rewired库，可能帮忙咱们注入自定义构建配置首先，装置react-app-rewired yarn add react-app-rewired -S将react-scripts全副替换成react-app-rewired： "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-app-rewired eject" },而后在工程的根目录下新建config-overrides.js配置文本，加上润饰器配置脚本代码： const { injectBabelPlugin } = require('react-app-rewired');module.exports = function override(config, env) { config = injectBabelPlugin([ "@babel/plugin-proposal-decorators", { "legacy": true } ], config) return config;}执行npm run start后提醒咱们应用customize-cra自定义配置进去customize-cra官网理解一下如何应用照着下面配置就能够让我的项目反对润饰器语法了 const { override, addDecoratorsLegacy, } = require('customize-cra');module.exports = override( addDecoratorsLegacy())