React のスキャフォールドを構築する#
package.jsonファイルを初期化して生成する：
npm init -y
- 必要な依存パッケージをインストールする：
# react react-domはreactコンポーネントを書くときに必要
npm i react react-dom -D
# webpack webpack-cliはwebpackの設定時に使用
npm i webpack webpack-cli -D
# 開発サーバーをインストールし、開発モードでローカルサービスを起動
npm i webpack-dev-server -D
# babel-loaderはjsファイルをトランスパイルするために使用
# @babel/coreはbabelのコアライブラリで、必ずインストールする必要がある
# @babel/preset-envは高級なjs構文をコンパイルするためのプリセット
npm i babel-loader @babel/core @babel/preset-env -D
# react内の構文をコンパイルするため
npm i @babel/preset-react -D
# 開発モードでは、htmlテンプレート内でコンポーネントスタイルを確認する必要がある
# これによりhtmlファイルがバンドルされ、cssスタイルとjsコードが自動的にインポートされる
npm i html-webpack-plugin -D
# 本番モードでは、cssファイルを独立してバンドルする必要がある
npm i mini-css-extract-plugin -D
# cssコードを圧縮する
npm i css-minimizer-webpack-plugin -D
# style-loaderはcssスタイルをhtmlに挿入する
# css-loaderはimportで引き込んだcssファイルをcssコードにコンパイルする
npm i style-loader css-loader -D
- スキャフォールドを構築する、ここでは開発環境と本番環境を分ける必要がある
- 開発環境
webpack.dev.js
const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
mode: "development",
entry: "./src/index.js",
module: {
rules: [
// cssを処理する
{
test: /\.css$/,
use:["style-loader","css-loader"]
},
// jsとjsxを処理する
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
},
plugins: [
new htmlWebpackPlugin({
// 開発モードでhtmlをバンドルする際、index.htmlをテンプレートとして使用
template: path.resolve(__dirname,"public/index.html")
})
],
// 開発モードのsource-mapを設定し、コードのデバッグやバグの特定を容易にする
devtool: "cheap-module-source-map",
// 開発サーバーを設定する
devServer: {
port: 3001,
open: true
},
resolve: {
// 拡張子を自動的に補完し、インポート時にファイルの拡張子を省略できる
extensions: [".js",".jsx",".json"]
},
// externalsはimportで引き込んだパッケージがバンドルに含まれないように定義する
// つまり、コンポーネントを書くときに引き込むreactとreact-domはバンドルしない
externals: {
react:{
root: "React",
commonjs2: "react",
commonjs: "react",
amd: "react",
},
"react-dom":{
root: "ReactDom",
commonjs2: "react-dom",
commonjs: "react-dom",
amd: "react-dom"
}
}
}
- 本番環境
webpack.prod.js
const path = require("path");
const miniCssExtractPlugin = require("mini-css-extract-plugin");
const cssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
mode: "production",
entry: "./src/index.js",
output: {
// libディレクトリにバンドルする
path: path.resolve(__dirname,'lib'),
filename: "index.js",
// バンドル時に自動的に既存のバンドルファイルをクリアする
clean: true,
// npmライブラリに公開する際の関連情報
// nameはnpmに公開する際のライブラリ名で、他の人がインストールする際に使用する
// typeはライブラリの公開形式で、umdは他のモジュール定義の下でこのライブラリをインポートできることを示す
// 例えばCommonJs AMDおよびグローバル変数の形式
// exportはどのエクスポートがライブラリとして公開されるべきかを指定する
// defaultは私たちがデフォルトでエクスポートするライブラリ
library: {
name: 'xpy-markdown',
type: 'umd',
export: 'default'
},
},
module: {
rules: [
{
test: /\.css$/,
use: [
miniCssExtractPlugin.loader,
'css-loader'
]
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
},
plugins: [
new miniCssExtractPlugin({
// 私たちがファイル内でインポートするのはpublicTest.cssなので
// バンドル後もこの名前を使用し、インポート失敗を避ける
filename: 'publicTest.css'
})
],
resolve: {
// .js .jsx .jsonファイルのインポート時に拡張子を隠すことをサポート
extensions: ['.js', '.jsx', '.json']
},
// 圧縮と最適化に関する設定はoptimizationに記述
optimization: {
minimizer: [
new cssMinimizerPlugin()
]
},
externals: {
react: {
root: 'React',
commonjs2: 'react',
commonjs: 'react',
amd: 'react',
},
'react-dom': {
root: 'ReactDOM',
commonjs2: 'react-dom',
commonjs: 'react-dom',
amd: 'react-dom',
}
}
}
babelの設定#
@babel/preset-envを使用して互換性を持たせる- jsx 構文をコンパイルするために
@babel/preset-reactを使用
module.exports = {
presets: [
"@babel/preset-env",
"@babel/preset-react"
]
}
package.jsonの設定#
- ドキュメント参照：
https://juejin.cn/post/7145001740696289317
{
"name": "xpy-markdown",
"version": "1.0.0",
"description": "...",
"main": "lib/index.js", // モジュールの出口ファイル
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack serve --config webpack.dev.js", // 開発モードでnpm startを起動
"build": "webpack --config webpack.prod.js", // 本番モードでプロジェクトをバンドルするnpm run build
"pub": "npm run build && npm publish" // npmにログインした後、npm run pubを実行すると、直接バンドルしてnpmに公開される
},
"repository": {
"type": "git",
"url": "https://gitee.com/guozia007/pulish-react-test01.git"
},
"keywords": [
"react",
"react component",
"practive"
],
"publishConfig": {
"registry": "https://npm.pkg.github.com"
},
"files": [
"lib"
],
"author": "xiaopy",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.21.0",
"@babel/preset-env": "^7.20.2",
"@babel/preset-react": "^7.18.6",
"babel-loader": "^9.1.2",
"css-loader": "^6.7.3",
"css-minimizer-webpack-plugin": "^4.2.2",
"html-webpack-plugin": "^5.5.0",
"mini-css-extract-plugin": "^2.7.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"style-loader": "^3.3.1",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1"
},
"peerDependencies": {
"react": ">=16.9.0",
"react-dom": ">=16.9.0"
},
"browserslist": [
"> 0.25%",
"last 2 versions",
"not dead"
]
}
.npmignoreの設定#
- アップロードするファイルをフィルタリングする
node_modules
.DS_Store
*.log
以上です。