react项目搭建

最新推荐文章于 2024-07-05 18:15:36 发布

qq小小布丁

最新推荐文章于 2024-07-05 18:15:36 发布

阅读量586

点赞数

分类专栏： react 文章标签： react

本文链接：https://blog.csdn.net/u012841667/article/details/73104725

版权

react 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

参考：https://my.oschina.net/u/1403181/blog/672501\
项目目录：

环境搭建
安装node，git
webpack：模块加载器兼打包工具
node.js：集成了npm包管理器
项目搭建
（1）定位到项目文件夹中，执行如下命令，生成package.json文件，

npm init

安装需要的包，scripts中是命令执行的简写：

{
  "name": "app",
  "version": "0.0.1",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "bundle": "babel-node tools/run bundle",
    "build": "webpack",
    "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
  },
  "author": "liyongfen",
  "license": "ISC",
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  },
  "dependencies": {
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  },
  "description": ""
}

（2）生成了一个node项目，接着安装node模块

npm install webpack --save-dev

–save的作用：自动把模块和版本号添加到package.json文件中的dependencies部分
–save-dev作用：自动把模块和版本号添加到package.json文件中的devDependencies部分
（3）安装webpack需要的加载器

 npm install babel-loader babel-preset-es2015 babel-preset-react --save-dev

加载器这里应该是很重要的一步了，如果没有这几个加载器我们的jsx语法，和es2015语法就会报错（ps：网上很多教程都没有重点提及这几个加载器）
（4）安装react模块

npm install react react-dom --save-dev

3.文件配置&运行
（1）webpack.config.js文件内容如下

var path = require("path");
var webpack = require("webpack");
module.exports = {
    //打包入口文件
    entry: ["webpack/hot/dev-server", path.resolve(__dirname, './app/main.js')],
    //打包输出文件
    output: {
        path: path.resolve(__dirname, './build'),//打包输出文件路径
        filename: "bundle.js"//打包输出文件名
    },
    module: {
        loaders: [{
                test: /\.js?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                }
        }]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};

（2）main.js文件
引入productBox.js这个组件

let React=require('react');
let ReactDOM=require('react-dom');
let AppComponent=require('./components/productBox.js');
ReactDOM.render(<AppComponent/>,document.getElementById('content'));

（3）组件productBox.js

var React=require('react');
var ProductBox=React.createClass({
    render:function(){
        return(
        <div className="productBox">
            hello react!!!!
        </div>      
            );
    }
});
module.exports = ProductBox;

（4）bundle.js文件
这个文件是在build文件夹中的，是编译输出文件
（5）index.html
在build文件夹下的index.html中引入bundle.js

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <title>React Project</title>
</head>
<body>
<script src="http://localhost:8080/webpack-dev-server.js"></script>
<div id="content">
    <script src="./bundle.js"></script>
</div>
</body>
</html>

（6）运行

npm run dev

（7）浏览器中输入：http://localhost:8080/index.html

注意：webpack2版本开始，webpack.config.js中的loader选项不能使用缩写，如babel-loader不能缩写成babel，不然打包会出错。

 throw new Error("Module '" + loader.path + "' is not a loader (must have normal or pitch function)")

qq小小布丁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录