React NPM Boilerplate 使用教程

React NPM Boilerplate 使用教程

react-npm-boilerplateBoilerplate for creating React Npm packages with ES2015项目地址:https://gitcode.com/gh_mirrors/re/react-npm-boilerplate

1. 项目的目录结构及介绍

react-npm-boilerplate/
├── src/
│   ├── index.js
│   ├── components/
│   │   └── ExampleComponent.js
│   └── styles/
│       └── exampleComponent.css
├── .babelrc
├── .gitignore
├── package.json
├── README.md
└── webpack.config.js

• src/: 源代码目录，包含所有React组件和样式文件。
  • index.js: 项目的入口文件。
  • components/: 存放React组件的目录。
    • ExampleComponent.js: 示例组件。
  • styles/: 存放样式文件的目录。
    • exampleComponent.css: 示例组件的样式文件。
• .babelrc: Babel配置文件，用于转译JavaScript代码。
• .gitignore: Git忽略文件配置。
• package.json: 项目依赖和脚本配置文件。
• README.md: 项目说明文档。
• webpack.config.js: Webpack配置文件，用于打包项目。

2. 项目的启动文件介绍

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import ExampleComponent from './components/ExampleComponent';
import './styles/exampleComponent.css';

ReactDOM.render(<ExampleComponent />, document.getElementById('root'));

• 导入React和ReactDOM: 用于渲染React组件。
• 导入ExampleComponent: 项目的示例组件。
• 导入样式文件: 示例组件的样式文件。
• 渲染组件: 将ExampleComponent渲染到DOM中的root元素。

3. 项目的配置文件介绍

package.json

{
  "name": "react-npm-boilerplate",
  "version": "1.0.0",
  "description": "A boilerplate for creating React npm components",
  "main": "dist/index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/preset-env": "^7.14.6",
    "@babel/preset-react": "^7.14.5",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.2.6",
    "style-loader": "^2.0.0",
    "webpack": "^5.38.1",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  }
}

• name: 项目名称。
• version: 项目版本。
• description: 项目描述。
• main: 项目的主入口文件。
• scripts: 项目脚本，包括启动开发服务器和构建项目。
• dependencies: 项目依赖，包括React和ReactDOM。
• devDependencies: 开发依赖，包括Babel、Webpack及其加载器。

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
    libraryTarget: 'commonjs2'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  externals: {
    react: 'commonjs react'
  }
};

• entry: 项目的入口文件。
• output: 打包输出配置，包括

react-npm-boilerplateBoilerplate for creating React Npm packages with ES2015项目地址:https://gitcode.com/gh_mirrors/re/react-npm-boilerplate