如何在 NodeJs 上搭建 React 开发环境 如何在 NodeJs 上搭建 React 开发环境

\u5982\u4f55\u5728 NodeJs \u4e0a\u642d\u5efa React \u5f00\u53d1\u73af\u5883

\u4f55\u642d\u5efa nodereact \u53d1\u73af\u5883
\u4f55\u642d\u5efa nodereact \u53d1\u73af\u5883
var path = require("path");
var webpack = require('webpack');
module.exports = {
entry: { app: ['./app/main.jsx'] },
output: {
path: path.resolve(__dirname, "./build"),
publicPath: "",
filename: "bundle.js"
},
resolve: {
extensions: ['','.js','.jsx']
},
module: {
loaders: [
{test:/\.jsx$/, loaders:['jsx?harmony']}
],
//\u4f7f\u7528ES6\u624d\u9700\u8981\u6dfb\u52a0loaders
loaders:[
{
test: /\.jsx?$/,
loader: 'babel',
include: ROOT_PATH,
query: {
//\u6dfb\u52a0\u4e24presents \u4f7f\u7528\u4e24\u79cdpresets\u5904\u7406js\u6216\u8005jsx\u6587\u4ef6
presets: ['es2015', 'react']
}
}
]
},
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE.ENV':"development"
}),
new webpack.HotModuleReplacementPlugin()
]
};

1\u3001\u4e0b\u8f7d\u6e90\u7801 \u901a\u8fc7\u641c\u7d22\u5f15\u64ce\u627e\u5230CVS\u7684\u6e90\u4ee3\u7801\u5305\uff0c\u4e5f\u53ef\u4ee5\u4eceCVS\u7684\u5b98\u65b9\u7f51\u7ad9cvshome.org\u4e0a\u5bfb\u627e\uff0c\u7531\u4e8eCVS\u5386\u53f2\u4e0a\u4e5f\u51fa\u73b0\u8fc7\u4e00\u4e9b\u5b89\u5168\u6f0f\u6d1e\uff0c\u6240\u4ee5\u5efa\u8bae\u8981\u5b9a\u671f\u53bb\u5176\u5b98\u65b9\u7f51\u7ad9\u4e0a\u770b\u770b\u6709\u6ca1\u6709\u6700\u65b0\u7248\u672c\u63a8\u51fa\u3002 2\u3001\u7f16\u8bd1\u5b89\u88c5 [root@terry src]# tar -xjpvf cvs-1.12.5.tar

步骤：
1. 安装 nodejs ：根据你的 Windows 类型(x86或x64)下载相应的安装包，安装完成后，在任一目录下打开 cmd 窗口并运行 node -v 命令，则会输出 node 的版本信息。
--注：在 windows 操作系统中，如果把 nodejs 安装在系统盘（如：C盘），初始化时会提示 nodejs 没有操作文件的权限（无法新建 package.json 文件）。
（建议在非系统盘中安装 nodejs ，本例安装路径：D:\Program Files）
2. 初始化 npm：安装 nodejs 时会默认安装 npm，在 cmd 窗口中运行 npm -v 命令会输出 npm 的版本信息。
接着运行 npm init 命令，并设置相关参数即完成 npm 初始化。这时 nodejs 会在当前目录下（这里是：D:\Program Files\nodejs 目录）新建一个 package.json 文件。
3. 利用 npm 安装 react 相关的包：
3.1 运行 npm install react react-dom --save-dev 命令，安装 react 和 react-dom 包。
其中 --save-dev 表示在 package.json 文件的 devDependencies 节点下添加包的引用，--save 表示在 package.json 文件的 dependencies 节点下添加包的引用
3.1 运行 npm install webpack webpack-dev-server --save-dev 命令，安装 webpack 和 webpack-dev-server 包。
webpack 用来打包并压缩 js 文件，webpack-dev-server 用来实时同步修改过的 js，html，css 文件到浏览器。
3.5 运行 npm install jsx-loader --save-dev 命令，安装 jsx-loader 包（用来把按 ES5 规范编写的 .jsx 文件转成 .js 文件）。
如果需要支持符合 ES6 规范的脚本文件（.js 或 .jsx），还需安装下面 4 个包：babel-core babel-loader babel-preset-es2015 babel-preset-react。

扩展阅读：新手s应该怎么玩 ... 如何使用node js ... 为什么没人用nodejs做后端 ... 如何用nodejs搭建服务端 ... java windowbuilder ... 如何重新安装node js ... 如何查看node js版本 ... vue必须用nodejs吗 ... 安装node js步骤 ...