1: React プロジェクトで遭遇する問題
1. create-react-app <プロジェクト名>を使用して プロジェクトを作成します
npm run eject を 実行して 、config フォルダーをポップアップ表示します。
2. オンデマンドでロードするように antd を構成する
最初にbabel-plugin-import をインストールする必要があります" npm install babel-plugin-import --save-dev/ npm i babel-plugin-import -D
create-react-app の公式スキャフォールディングがアップグレードされたため、 webpack.config.dev.js および webpack.config.prodはありません。
これら 2 つのファイルはすべて、ここでは webpack.config.js で Less を構成します。
下を見てください」
//找到这个位置
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
//在此添加如下两个常量
const lessRegex =/\.less$/;
const lessModuleRegex=/\.module\.less$/;
//找到此位置
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
}),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
test: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
}),
},
//在这之后仿照上面添加如下代码
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders({
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
}),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders({
importLoaders: 2,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
sourceMap: isEnvProduction && shouldUseSourceMap,
}),
},
package.json でプラグインを構成する必要もあります
"babel": {
"presets": [
"react-app"
],
//加入以下信息
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css"
}
]
]
}
「antd」からの参照 antd import{Button} の再プロジェクト が成功しました
import {Button,Radio} from 'antd'
function App() {
return (
<div >
<Button type="primary">测试</Button>
<Radio></Radio>
<Button type="dashed">Dashed</Button>
<Button type="danger">Danger</Button>
<Button type="link">Link</Button>
</div>
);
}
export default App;
3. 設定コードのフォーマット
ここではESLint + Standardプロジェクト構成 を使用しています
私の .eslintrc.js設定を見てください。
module.exports = {
root: true,
// 环境,这里可以设置环来做区别判断
env: {
browser: true,
commonjs: true,
es6: true
},
// 使用的扩展库
extends: ['standard', 'standard-react'],
// 解析器用于解析代码
parser: 'babel-eslint',
// 解析器配置
parserOptions: {
ecmaFeatures: {
jsx: true
},
ecmaVersion: 2018,
sourceType: 'module'
},
// 可以全局使用变量
globals: {
Babel: true,
React: true,
PATH_ENV: true
},
// 第三方插件
plugins: [],
// 规则配置
rules: {
'no-unused-vars': 'off',
semi: 0,
'no-tabs': 'off'
}
}
rules:{} には、関連する設定ルールが含まれています。これは驚くべきことです。
ルート ディレクトリに .editorconfig ファイルを作成します。
私の構成
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.js]
[*{scss,js,css}]
他にも詳しい紹介 リンクがあります
root = true # 根目录的配置文件,编辑器会由当前目录向上查找,如果找到 `roor = true` 的文件,则不再查找
[*] # 匹配所有的文件
indent_style = space # 空格缩进
indent_size = 4 # 缩进空格为4个
end_of_line = lf # 文件换行符是 linux 的 `\n`
charset = utf-8 # 文件编码是 utf-8
trim_trailing_whitespace = true # 不保留行末的空格
insert_final_newline = true # 文件末尾添加一个空行
curly_bracket_next_line = false # 大括号不另起一行
spaces_around_operators = true # 运算符两遍都有空格
indent_brace_style = 1tbs # 条件语句格式是 1tbs
spaces_around_brackets # 表示括号和括号之间应有空格:无空格,仅在括号内,仅在括号外或在括号的两侧 (none,inside,outside,both)
max_line_length # 在指定的字符数后强制换行。off关闭此功能
[*.js] # 对所有的 js 文件生效
quote_type = single # 字符串使用单引号
[*.{html,less,css,json}] # 对所有 html, less, css, json 文件生效
quote_type = double # 字符串使用双引号
[package.json] # 对 package.json 生效
indent_size = 2 # 使用2个空格缩进
4. プリプロセッサ sass を使用する
node-sass、sass-loaderをインストールする必要があります
スタートアップ プロジェクトのインストール後にエラーが見つかりました
Shenma のせいなのかはわかりませんが、テスト後、インストールする必要があります。
npm 再構築ノード-sass
大丈夫です。