zoukankan      html  css  js  c++  java
  • 初始化一个react项目

    初始化一个react项目

    mkdir init_react
    cd init_react
    npm init //如果没有什么特殊的配置一路回车,得到package.json文件
    

    目录结构

    dist ---------------------------------------------> //用于存放webpack打包之后的项目文件

    index.html ----------------------------------> //webpack打包之后的html文件

    main.hash值.bundle.js ---------------------> //webpack打包之后的js文件

    node_modules --------------------------------> //项目当中使用的第三方库文件存放目录

    src ----------------------------------------------> //生产环境中代码存放目录

    index.html ----------------------------------> //前端统一的html模版文件

    index.js -------------------------------------> //项目的主入口文件

    index.less -----------------------------------> //项目中的样式文件

    .babelrc ----------------------------------------> //babel的配置文件

    package.js

    webpack.config.js -----------------------------> //webpack的配置文件

    安装webpack打包工具和webpack-dev-server服务器

    npm install webapck --save
    npm install webpack-dev-server --save
    

    安装react和react-dom

    npm install react --save
    npm install react-dom --save
    

    安装babel

    npm install babel-preset-es2015 babel-preset-react babel-preset-stage-0 babel-polyfill babel-core --save-dev
    

    创建.babelrc文件,配置babel 预处理

    {
       "presets": ["es2015","react","stage-0"]
    }
    

    处理样式需要安装less

    npm install less --save
    

    安装webpack 的 loader

    npm install babel-loader style-loader css-loader less-loader --save-dev
    

    安装webpack插件

    npm install extract-text-webpack-plugin html-webpack-plugin --save-dev
    

    创建webpack.config.js文件

    var path = require('path')
    var webpack = require('webpack')
    var ExtractTextPlugin = require('extract-text-webpack-plugin')  
    var HtmlWebpackPlugin = require('html-webpack-plugin')
    
    module.exports = {
        devtool:'eval', //source-map
        entry:{
            main:'./src/index.js'//入口文件
        },
        output:{
            path:path.join(__dirname, 'dist'),//出口文件
            filename: '[name].[hash:8].bundle.js'
        },
        resolve: {
            extensions: [' ', '.js','.jsx', '.json','.css','.less']
        },
        module:{
            rules: [{
                test: /\.less$/,//加载less样式的loader
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: ['css-loader', 'less-loader']
                })
            }, {
                test: /\.js?$/,//用于解析es6语法的babel-loader
                exclude: /node_modules/,
                use: 'babel-loader'
            }]
        },
        plugins: [
            new webpack.HotModuleReplacementPlugin(), //热更新
            new webpack.NoEmitOnErrorsPlugin(), //错误不编译
            new ExtractTextPlugin('style.css'), //css模块独立
            new HtmlWebpackPlugin({
                    title: 'Redux Practive', //标题
                    // favicon: './src/assets/img/favicon.ico', //favicon路径
                    filename: './index.html', //生成的html存放路径,相对于 path
                    template: './src/index.html', //html模板路径
                    inject: true, //允许插件修改哪些内容,包括head与body`
                    minify: { //压缩HTML文件
                        removeComments: true, //移除HTML中的注释
                        collapseWhitespace: false //删除空白符与换行符
                    }
            })
         ]
    }
    
    

    修改package.json

    {
      "name": "init_react",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "start": "webpack-dev-server --hot --inline --progress --colors --watch --compress --content-base ./dist  --port 8086 --host 0.0.0.0",
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
        "less": "^2.7.2",
        "react": "^15.6.1",
        "react-dom": "^15.6.1",
        "webpack": "^3.3.0",
        "webpack-dev-server": "^2.6.1"
      },
      "devDependencies": {
        "babel-core": "^6.25.0",
        "babel-loader": "^7.1.1",
        "babel-polyfill": "^6.23.0",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "babel-preset-stage-0": "^6.24.1",
        "css-loader": "^0.28.4",
        "extract-text-webpack-plugin": "^3.0.0",
        "html-webpack-plugin": "^2.29.0",
        "less-loader": "^4.0.5",
        "style-loader": "^0.18.2"
      }
    }
    

    创建html模版文件

    在项目的根目录下创建src目录并创建index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div id="root"></div>
    </body>
    </html>
    

    在src目录下创建index.js

    import React from 'react'
    import ReactDOM from 'react-dom'
    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('root')
    )
    

    GitHub项目代码地址

    https://github.com/shuoer123/init_react

  • 相关阅读:
    leetcode 78. 子集 JAVA
    leetcode 91. 解码方法 JAVA
    leetcode 75. 颜色分类 JAVA
    leetcode 74 搜索二维矩阵 java
    leetcode 84. 柱状图中最大的矩形 JAVA
    last occurance
    first occurance
    classical binary search
    LC.234.Palindrome Linked List
    LC.142. Linked List Cycle II
  • 原文地址:https://www.cnblogs.com/shuoer/p/7266093.html
Copyright © 2011-2022 走看看