ホームページ > 記事 > ウェブフロントエンド > React は、create-react-app に基づいてプロジェクトを作成します
React は、create-react-app に基づいてプロジェクトを作成します
- 亚连オリジナル
- 2018-05-30 14:12:101720ブラウズ
この記事では主に 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 以外にも構成を変更する方法があります。 、展開せず、関連リンクのみを提供します。
cdn を使用するには、ブラウザ環境に対応するグローバル変数が存在するように、ページ内で React または他の同様のライブラリのスクリプト タグを引用することがよくあります。同時にjsのサイズを減らします。以下に反応を例として挙げます。
まず、config -> webpack.config.prod.js の設定に次のコードを追加します。
npm run eject
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了
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
以上がReact は、create-react-app に基づいてプロジェクトを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。