Node.js教程 react项目的环境搭建-职坐标

Node.js教程 react项目的环境搭建

沉沙 2018-09-20 来源：阅读 485 评论 0

摘要：本篇教程介绍了Node.js教程 react项目的环境搭建，希望阅读本篇文章以后大家有所收获，帮助大家对Node.js的理解更加深入。

本篇教程介绍了Node.js教程 react项目的环境搭建，希望阅读本篇文章以后大家有所收获，帮助大家对Node.js的理解更加深入。

准备
1、下载webstorm11和nodejs。下载太慢？直接百度云打包分享吧~~windows mac osx
开始
由于我的电脑的MacBook不是windows，因此可能安装和操作过程会有略微差异，但是差异不大，下面操作基本通用，不通用的我会指明。或者下面留言即可。

首先，确定你已经了解了react是干什么的，对react还不了解的请移步这里：react快速入门，我大体总结下吧：你就直接把react理解成能够用js实现web前端的组件化开发的一个框架就好了，它通过虚拟DOM来简化DOM操作提升性能，同时更好的实现模块化封装。再深了也没必要说了。
其次，你还得知道webpack是干什么的，对webpack不了解的请移步这里：webpack官网。这个网站我没有发现偏官方的中文站点，但是CSDN上应该有很多相关的教程。webpack是一个构建工具，能够把所有的静态资源进行编译打包，比如.js、.css、.png、.less等等吧，反正只要是静态的，不是什么php、jsp之类的动态网站文件都能打包。通过它统一管理资源和模块。
再次，你还得知道点nodejs的知识，这个网站nodejs中文教程会告诉你nodejs干什么用，都有哪些api。nodejs是一个在服务器端的高性能javascript框架，能够快速处理高并发的请求。它主要用的就是回调原理，通过它提供的api可以实现一些web请求处理。其中，nodejs包含了一个npm，全称是node package manager，说白了就是node项目的包管理器，通过npm命令，我们可以使用成千上万的javascript框架。
最后，就是你得会用webstorm了。这个被称为javascript开发神器IDE，能够大大提升你开发web前端的效率。综上，我觉得能进入这篇文的人想必肯定早就知道以上几个工具是干什么用的了，否则还进来干吗？串门啊？

入门

安装完毕上述几个工具之后，请打开你的命令行工具：windows 按下Windows符号键+R，输入cmd，会弹出命令行工具；mac直接在Launchpad中查找终端即可，Linux跟mac没啥区别，自己找终端去，在下面我们姑且统一称之为命令行。
首先在命令行中输入：npm -v ，看看是否有版本号出现。如果出现了，证明你的nodejs安装成功了，不需要配置环境变量。如果没出现，那么你还得把环境变量配置一下。不过nodejs默认是给你配置好环境变量的。
配置npm的代理地址：（由于伟大的墙的原因，会导致下载包很慢很慢~~~）
npm config set registry https://registry.npm.taobao.org

下面进入正轨了啊！！！提神！注意！看这，看这~~
启动webstorm，初次使用的话会让你导入以前的配置。如果是以前有配置文件就导入，没有就选择初次使用那一项。然后选择，create new project，建立一个新的工程。工程名就叫做：react_webpack_test吧。
点击OK，进入界面。然后打开webstorm的首选项设置（windows是File-settings），在Languages & Frameworks的JavaScript一栏选择JSX Harmony，点击OK。
重新打开命令行，依次输入
sudo npm install webpack webpack-dev-server babel  -g
sudo npm install react react-dom babel-loader less-loader css-loader style-loader url-loader file-loader babel-preset-es2015 babel-preset-react --save-dev
安装结果会显示一些WARN，无视！但是千万别有Error。
第一条命令是全局安装，模块会安装在/usr/local/,注意全局安装在mac/linux系统需要sudo然后输入密码，而windows不需要sudo哦~~第二条会安装在~/node_modules/下面。

参数解释：-g：允许包全局使用--save-dev:将依赖信息写入package.json的devdependencies。安装的每个组件解释：babel：能将es6语法解析成es5（什么是es？？ECMAScript*6*入门自己看去，js是它的子集，说白了就是最新的javascript语法），以前是使用jsx-loader来解析着，现在直接用babel替代就行了。babel-preset-es2015和babel-preset-react：让babel支持es2015语法和jsx语法的两个预设值。webpack：这个还用说吗？react-dom：依赖于react，现在都是通过ReactDOM.render()方法来渲染而不是React.render(),facebook官方已经说了。webpack-dev-server：webpack开发服务器，帮助开发者实时监控webpack项目的文件更改并反映到浏览器上。这样你就能实时地进行预览啦~babel-loader css-loader babel-loader style-loader url-loader file-loader：几种webpack需要用到的加载器，方便解析css、es6/jsx、和其他静态文件。小提示：全局安装支持直接在命令行中启用安装包的命令，例如：你安装了webpack，那么在命令行输入webpack就会出现相应执行，但是非全局不支持使用这个命令的哦。

接下来，再打开webstorm（最好这两个工具你都别关~）。在刚才那个react_webpack_test的工程中创建一个文件，文件名为webpack.config.js，然后在里边写上下面的代码：
var webpack=require(‘webpack‘);
var commonsPlugin=new webpack.optimize.CommonsChunkPlugin(‘common.js‘);
module.exports={
entry:{index:‘./src/js/entry.js‘},
output:{
    path:‘dist‘,
    filename:‘bundle.js‘
},
module:{
    loaders:[
        {
            test:/\.css$/,
            loader:‘style-loader!css-loader‘
        },
        {
            test:/\.jsx?$/,
            loader:‘babel‘,
            exclude: /node_modules/,
            query:{
                presets:[‘es2015‘,‘react‘]
            }
        },
        {
            test:/\.(png|jpg)$/,
            loader:‘url-loader?limit=8192‘
        },
        {
            test:/\.less$/,
            loader:‘style-loader!css-loader!less-loader‘
        },
        {
            test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loader: "url-loader?limit=10000&mimetype=application/font-woff"
        },
        {
            test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loader: "file-loader"
        }
    ],
    plugins:[
        commonsPlugin
    ]
},
resolve:{
    root:‘‘,
    extensions:[‘‘,‘.js‘,‘.json‘,‘.less‘],
    alias:{
        AppStore:‘js/stores/AppStores.js‘
    }
}
}
然后在当前工程目录创建一个src文件夹，在src里面创建一个js文件夹，在js文件夹中新建一个entry.js文件，文件内容如下：
var React=require(‘react‘);
var ReactDOM=require(‘react-dom‘);
ReactDOM.render(<div>Hello world!</div>, document.getElementById("test"));
接下来再在当前工程目录中新建一个dist文件夹，dist文件夹中新建一个index.html文件。内容如下：
<html>
<meta charset="utf-8">
<title>React webpack test</title>
</head>
<body>
<div id="test"></div>
</div>
<script type="text/javascript" src="./bundle.js" charset="utf-8"></script>
</body>
</html>
最后一步，最后一步了哦~~加入package.json文件，使之成为一个可以用npm命令执行的工程。
{
"name": "react_webpack_test",
"version": "1.0.0",
"description": "just webpack and react hello world project!",
"scripts": {
"build": "webpack --progress --profile --colors",
"watch": "webpack-dev-server --port 63340 --content-base ./dist/",
"test": "echo \"Error: no test specified\" && exit 1"
}
}
其中最重要的是script标签。接下来我们打开webstorm的Terminal功能（在IDE底部）,在里面输入
npm run build
然后，在你的Terminal里面会显示如下的东东
> react_webpack_test@1.0.0 build /Users/你的工程所在目录/react_webpack_test
> webpack \--progress \--profile \--color  2m0ms op1ms optimiz12ms emit
Hash: 292766b53fb3969afd55
Version: webpack 1.12.14
Time: 5109ms
Asset    Size  Chunks             Chunk Names
bundle.js  676 kB       0  [emitted]  index
\+ 159 hidden modules
如果里面出现了红色的Error那么就说明你的工程配置还有一些问题，如果OK的话，打开浏览器，在里面运行你的dist/index.html文件，看看是否有：hello world！输出
实时调试你的代码~在webstorm的Terminal中输入npm run watch，然后会在里面输出一堆日志，日志中不能出现红色的Error，同时会输出下面两句：
//localhost:63340/webpack-dev-server/
省略这部分……
webpack: bundle is now VALID.
输入：//localhost:63340/webpack-dev-server/，应该就可以看到你想要的结果，结果如下：插入图片哦
这个就是用来充数的，光棍节快乐！！

进阶
喝杯茶~…… 到了这可以说你的项目就已经完成了，如果你想跟我一样使用Amazeui-react组件，那么就继续跟我这样继续下去吧~

安装Amazeui-react
npm install amazeui amazeui-react --save-dev

修改./src/js/entry.js文件，替换成以下代码：
var React=require(‘react‘);
var ReactDOM=require(‘react-dom‘);
var AMUI=require(‘amazeui/dist/css/amazeui.min.css‘);
var AMUIReact = require(‘amazeui-react‘);
var button=(
<AMUIReact.Button>这是一个按钮</AMUIReact.Button>
);
ReactDOM.render(button,document.getElementById("test"));

Ctrl+S，保存当前代码，查看你的浏览器//localhost:63340/webpack-dev-server/页面有没有变化~~

下面是我的测试工程链接，自己下载下来拿去用吧.react_webpack_test

回复2016.07.19 10:09

还有 3 条评论，展开查看添加新回复

JYoung

6 楼 · 2016.07.18 14:00
特意注册了个账号来感谢一下，上午搞了半天没搞明白配置，还好群里的人推荐查一下这篇文章啦～现在已经可以愉快的撸码啦～
喜欢(0)回复

小黄人大侠： @JYoung 呵呵，不用客气，你的诚意已收到，好好地享受webpack和react给你带来的乐趣吧~
回复2016.07.20 14:20

添加新回复

AlbertBreeze

7 楼 · 2016.07.27 11:11
生成的bundle.js文件有700多KB大小，有办法进行压缩么？
喜欢(0)回复

小黄人大侠： @AlbertBreeze 关于压缩请去webpack官网查看code spliting部分。
回复2016.07.27 11:18

添加新回复

vargent

8 楼 · 2016.08.22 09:59
按照你这个配置，还是没有配置成功，找不到webpack 本人新手
喜欢(0)回复

小黄人大侠： @vargent webpack没装成功
回复2016.08.24 14:39

小黄人大侠： @vargent 使用全局安装 npm install -g webpack
回复2016.08.24 14:40

添加新回复

Chozo

9 楼 · 2016.09.11 23:42
Error: Cannot find module ‘webpack‘这是什么情况Failed at the react_webpack_test@1.0.0 build script ‘webpack --progress --profile --colors‘.还有这个我也是mac出错了
喜欢(0)回复

小黄人大侠： @Chozo 你没有安装webpack，使用全局命令:npm install webpack webpack-dev-server -g --save-dev 安装一次即可
回复2016.09.12 11:22

添加新回复

秋夜已凉

10 楼 · 2016.09.12 13:43
这个就是用来充数的，光棍节快乐！！可见作者是个大神，写的很好！??
喜欢(0)回复

小黄人大侠： @秋夜已凉 ??
回复2016.09.12 19:30

添加新回复

登录后发表评论

搭建react项目的环境原文地址：//www.cnblogs.com/xiaoshitou188/p/5868557.html