この記事では主に create-react-app に基づいた React プロジェクトの作成を紹介しますので、参考にしてください。
create-react-appとは
create-react-appは、Reactプロジェクトを簡単に構築するために使用でき、構築時のWebpackの設定、サーバーのデバッグ、スクリプトの実行などの手間を省きます。反応プロジェクトを作成するには、このライブラリを使用するだけで、反応プロジェクトの作成と初期化プロジェクトをワンクリックで完了できます
まず、create-react-app を使用して反応プロジェクトを作成する必要があります。https:/ を参照してください。 /github.com/facebookincubator/create -react-app
注: "[ ]" で囲まれたものはすべてカスタマイズ可能なコンテンツです。例: cd [project-name]。実際には cd my-app または cd my- である可能性があります。プロジェクト。つまり、「[ ]」パッケージの内容は、コンテキスト内の対応する変数を表すだけです。
npm install -g create-react-app
create-react-app [project-name]
cd [project-name]
ログイン後にコピー
上記のコマンドを実行した後、この時点で、npm run start と npm run build を実行します。ただし、デフォルトではすべての設定が非表示になっています。設定をカスタマイズしたい場合は、次のコマンドを実行する必要があります。続行しますか? y を入力して、すべての構成項目をアウトにします。この時点で、次のようなカスタマイズされた構成を行うこともできます:
ビルド後に出力場所を変更します
js / css / img およびその他の静的リソースは、デフォルトで build -> static に出力され、それらの構成項目は config -> webpack.config.prod.js にあります。
js は出力属性の 60 行目で、
css は最初の 38 行目で cssFilename 変数で宣言されます。ルール、143 行目について; マップ ファイルは devtool 属性によって制御されます。マップが必要ない場合は、57 行目についてコメントアウトしてください。 、294行目について;
- 基本的なテンプレートはHtmlWebpackPluginの設定にありますが、「./paths.js」ファイルを参照していることがわかります。そのため、config -> pathsでappHtml属性を変更する必要があります。 js;
ビルドディレクトリを構築するとき、設定項目は fs.emptyDirSync(paths.appBuild); です -> この文をコメントアウトしても古いファイルは削除されません。グレースケール リリース中に使用されます); - eject せずに構成を変更する他の方法はありません
この記事のテーマにより、npm run eject 以外にも構成を変更する方法があります。 、展開せず、関連リンクのみを提供します。
より洗練された方法 (と考える人もいます) は、react-app-rewired プラグインを導入して構成のオーバーライドを実現することです。ルート ディレクトリに新しい config-overrides.js ファイルを作成し、設定したい内容を記述する必要があります (なぜ別の設定があるのでしょうか...) また、npm start およびその他の関連コマンドも書き換える必要があります。をクリックして詳細を表示します。
別の例については、create-react-app の git ホームページで推奨されている CSS プリプロセッサ (Sass、Less など) の追加を参照してください。一般的なアイデアは、まずノード環境で Sass をコンパイルできるプラグイン node-sass-chokidar をインストールし、次に npm-run-all を使用して npm start と watch-css (sass ファイルを監視するコマンド) を実行することです。同時。個人的には大団円のような気がするので、またお話しましょう。 。 。
react などはグローバル変数としてパッケージ化されていません
cdn を使用するには、ブラウザ環境に対応するグローバル変数が存在するように、ページ内で React または他の同様のライブラリのスクリプト タグを引用することがよくあります。同時にjsのサイズを減らします。以下に反応を例として挙げます。
まず、config -> webpack.config.prod.js の設定に次のコードを追加します。
key はライブラリの名前に対応し、value はグローバルの名前に対応します。変数。ここで、グローバル変数の名前はコード内のインポートの名前と一致している必要があり、標準化されている必要があることに注意してください。
さらに、html-webpack-pluginプラグイン設定のテンプレートファイルをここで変更する必要があります。グローバル変数を追加する必要があるため、対応するスクリプトを追加するだけです。 public ->index.html を例に挙げます:
module.exports = {
...
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
},
...
}ログイン後にコピー
Q: ブラウザーには window.React などのグローバル変数があるため、さらに、react をインポートする必要さえない場合、externals を設定することに何の意味があるでしょうか (この場所は非常に明確です。これが理由ではありませんか)。
回答: 上記のようにインポートと外部を削除すると、ビルドされたファイルはブラウザ上でスムーズに実行できます。ただし、開発中にサーバーが起動された場合、サーバー側は参照を分析できず、また、フロントエンドとバックエンドの同型性については、サーバー側で依存関係を見つけることができません。したがって、静的ファイルの監視を有効にしてブラウザを手動で更新すれば、インポートや外部を行わなくても理論上は問題ありません。
sass 以下をインストールします (sass を例にします)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
code here
-->
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<p id="root"></p>
<!--
code here
-->
<!-- 新插入的两个js -->
<script src="http://st01.chrstatic.com/themes/chr-cdn/react/v0.14.8/react.min.js"></script>
<script src="http://st01.chrstatic.com/themes/chr-cdn/react/v0.14.8/react-dom.min.js"></script>
</body>
</html>
ログイン後にコピー
または
npm install sass-loader node-sass --save-dev
ログイン後にコピー
安装后修改config -> webpack.config.dev.js 和 webpack.config.prod.js，分别在css的loader配置里面修改两处：
一是 test: /\.css$/ 增加scss和sass；二是use里面最后再加个loader，直接加 "sass-loader" 就可以了，也不用配置别的了（less同）。
//test: /\.css$/
test: /\.(css|scss|sass)$/
...
use:[
{
...
},
"sass-loader"
]ログイン後にコピー
添加ant-design
安装antd及按需加载的插件babel-plugin-import，参考https://ant.design/docs/react/introduce-cn
npm install antd babel-plugin-import --save-dev
ログイン後にコピー
在config -> webpack.config.dev.js 和 webpack.config.prod.js 里（或者 .babelrc 文件）的babel-loader的options配置里，加入如下代码：
plugins: [
['import', { libraryName: 'antd', style: 'css' }] // `style: true` 会加载 less 文件
]ログイン後にコピー
如果启用了 style:true 那就必须是装less了
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
Vue实现搜索 和新闻列表功能简单范例
vue axios 表单提交上传图片的实例
vue中实现图片和文件上传的示例代码
以上がReact は、create-react-app に基づいてプロジェクトを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
