Webstorm React Nodejs 整合

1 .下载安装介质

nodejs：https://nodejs.org/en/

由于6.3.0版本之后会自带npm的包管理所以不需要单独的安装npm

webstorm：https://www.jetbrains.com/webstorm/download/

坑（npm报错）


npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Lengxiaoyu\AppData\Roaming\npm-cache\_logs\2018-10-17T13_59_39_052Z-debug.log

解决方案：

npm config set registry https://registry.npm.taobao.org

2. 构建项目

使用webstorm新建一个空白项目
通过alt+f12来打开webstorm的控制台
在控制台输入以下命令

npm init

npm install webpack webpack-dev-server babel --save-dev

--save-dev 会把下载包的相关信息写到package.json的devDependencies里面方便以后发布，其他人使用的时候只需要npm install就可以把相关的依赖下载到当前的项目里面。

npm install react react-dom babel-loader less-loader css-loader style-loader url-loader file-loader babel-preset-es2015 babel-preset-react react-hot-loader jquery eslint eslint-plugin-react babel-core babel-eslint babel-plugin-import --save-dev

npm install webpack-cli -g

-g表示把这这个包安装在全局中

npm install -D @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/polyfill babel-loader

新建一个webpack.config.js的文件，在文件里面添加如下信息

var webpack = require('webpack');
module.exports = {//2、进出口文件配置entry:// 'webpack-dev-server/client?http://localhost:3000',// 'webpack/hot/only-dev-server',__dirname+'/jsproject/entry.js',//指定的入口文件,“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录output: {//输出path: __dirname+'/index',//输出路径filename: 'bundle.js',//输出文件名publicPath: '/index/'},module: {//在配置文件里添加加载器说明，指明每种文件需要什么加载器处理，// 配置规则时不应加载json-loader，因为现在的版本本身会解析json数据，再加载一次会导致json被解析两次，出现错误rules: [{test: /\.js$/,exclude: /node_modules/,loader: 'babel-loader',}, {test: /\.vue$/,exclude: /node_modules/,loader: 'vue',}, {test: /\.css$/,exclude: /node_modules/,// loader: "css-loader!style-loader",use: [{loader: "style-loader"},{loader: "css-loader",options: {importLoaders:1}},]}, {test: /\.(html|tpl)$/,exclude: /node_modules/,loader: 'html'}, {test: /\.jsx$/,exclude: /node_modules/,loaders: ['jsx', 'babel']}],noParse: /jquery|lodash/,unknownContextRegExp: /$^/,unknownContextCritical: false,exprContextRegExp: /$^/,exprContextCritical: false,wrappedContextRegExp: /$^/,wrappedContextCritical: false,},//4、服务器依赖包配置devServer: {//注意：网上很多都有colors属性，但是实际上的webpack2.x已经不支持该属性了contentBase: "./index",//本地服务器所加载的页面所在的目录historyApiFallback: true,//不跳转inline: true//实时刷新//hot：true,//不要书写该属性，否则浏览器无法自动更新//publicPath："/asses/",//设置该属性后，webpack-dev-server会相对于该路径},plugins:[]//插件
}

新建一个.babelrc的文件，在文件里面添加如下信息

{"presets": ["@babel/preset-env","@babel/preset-react"]
}

新建一个.eslintrc的文件，在文件里面添加如下信息

{"env": {"browser": true,"commonjs": true,"es6": true},"parserOptions": {"ecmaVersion": 6},"rules": {"indent": ["error", 2],"no-mixed-spaces-and-tabs": "error","camelcase": "error","eqeqeq": "warn","curly": "error","no-undef": "error","no-unused-vars": "warn","max-params": "warn"}
}

新建一个server.js的文件，在文件里面添加如下信息

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');new WebpackDevServer(webpack(config), {contentBase : './index/',//用来指定index.html所在目录publicPath: config.output.publicPath,//用来指定上线时运行地址hot: true,//表示热加载，使用Inline:true可以自动刷新inline:true,//启用 noInfo 后，诸如「启动时和每次保存之后，那些显示的 webpack 包(bundle)信息」的消息将被隐藏。错误和警告仍然会显示。historyApiFallback: true/*指的是当路径匹配的文件不存在时不出现404，也可以通过如下面设置指定当路径匹配的文件不存在时跳转的页面historyApiFallback:{index:'build/index.html'},*/// 'disableHostCheck' : true    //不检查host地址
}).listen(3000, 'localhost', function (err, result) {if (err) {return console.log(err);}console.log('Listening at http://localhost:3000/');
});

修改package.json修改为如下内容：

{"name": "pockerui","version": "1.0.0","description": "test","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "node server.js"},"author": "","license": "ISC","dependencies": {"@babel/preset-react": "^7.0.0","c-p": "^1.3.5","chromedriver": "^2.42.1","ismobilejs": "^0.4.1","react": "^16.1.1","react-dom": "^16.1.1"},"devDependencies": {"@babel/core": "^7.0.0-beta.31","@babel/preset-env": "^7.0.0-beta.31","babel-loader": "^8.0.0-beta.0","babel-preset-es2015": "^6.24.1","babel-preset-es2017": "^6.24.1","babel-preset-react": "^6.24.1","colors": "^1.1.2","css-loader": "^0.28.0","es6-promise-promise": "^1.0.0","eslint": "^3.19.0","extract-text-webpack-plugin": "^3.0.2","file-loader": "^0.11.2","html-webpack-plugin": "^2.28.0","imports-loader": "^0.7.1","jsdoc": "^3.4.3","json-loader": "^0.5.4","less": "^2.7.2","less-loader": "^4.0.3","prompt": "^1.0.0","pug": "^2.0.0-rc.4","pug-loader": "^2.3.0","sqlite3": "^3.1.8","stats.js": "^0.17.0","style-loader": "^0.16.1","webpack": "^4.17.1","webpack-cli": "^3.1.0","webpack-dev-server": "^3.1.7","webpack-notifier": "^1.5.0","xlsx": "^0.11.8"}
}

css文件夹下创建文件index.css，文件内容如下:

p{font-size: 24px;padding:0 100px;color:blue;
}
p:nth-of-type(2) {font-size: 30px;text-align: center;color:black;font-family:"幼圆";
}
p:nth-of-type(3) {color: red;font-weight:bold;text-align: right;
}

data文件夹下，创建文件index.json，文件内容如下:

{"name":"hello webpack", "content":"this is my first demo", "start":"Ready Go!"}

index文件夹下，创建文件index.html，文件内容如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>myFirstDemo</title>
</head>
<body>
<div id="app"></div>
<script src="/index/bundle.js"></script>
<!--注意：此处的src路径与前面的index.html不一致，路径为publicPath路径-->
</body>
</html>

jsproject文件夹下，创建文件createdom.js，文件内容如下

import React, { Component } from 'react';
var message=require('./../data/index.json');
export default class App extends Component {render() {return (<div><p>{message.name}</p><p>{message.content}</p><p>{message.start}</p></div>);}
}
// module.exports = function() {
//     var greet=document.createElement('div');
//     greet.innerHTML="<p>"+message.name+"</p>"+"<p>"+message.content+"</p>"+"<p>"+message.start+"</p>";
//     return greet;
// };

jsproject文件夹下，创建文件entry.js，文件内容如下

require('./../css/index.css');
import React from 'react';
import ReactDOM from 'react-dom';
import App from './createdom';
// var createdom = require('./createdom.js');
// document.getElementById('app').appendChild(createdom());
ReactDOM.render(<App />, document.getElementById('app'));

此时的目录结构如下：

3.项目运行

控制台输入：

npm run start

查看demo效果，需在浏览器中访问链接：http://localhost:3000/

网上找的帖子，真心是坑啊，最后一步不好使，找了一个多小时，差点放弃。主要问题是版本兼容的问题，package.json的修改了一个多小时，前端要是有maven这样子的管理工具就好了，解决版本匹配问题。

Webstorm React Nodejs 整合相关推荐

基于WebStorm, React和Ant.Design开发WebAppDemo
前提条件: 已安装过webstorm和nodejs. 安装create-react-app和yarn npm install -g create-react-app yarn 打开WebStorm创建 ...
下载webStorm，nodejs，git并简单配置，为JavaScript做准备
1.webStorm,nodejs,git webStorm:https://www.jetbrains.com/webstorm/download/other.html 下载后需要破解,请根据自己电 ...
React+NodeJS打造个人博客（上）
文章目录前言一.前期准备二.React篇(搭建静态页面) 1. 创建React项目 2. 启动React项目 3. 完成登录与注册页面 4. 完成整体布局 1. 安装React-router 2 ...
Ubuntu下使用WebStorm开发nodejs（一）
一.Ubuntu下WebStorm的安装: 注:WebStorm是基于Java的,需要JDK支持,需提前完成安装JDK及环境变量的配置,而且需要先安装完nodejs和npm,请看这篇文章Ubuntu下 ...
將一個react+nodejs聊天軟件前後端項目進行docker打包並運行
文章目录 1概述 2将react前端打包入docker 2.1打包react项目 2.2nginx配置 2.3创建Docker镜像 2.4打包和运行 2.5上传dockerhub 3将nodejs打包 ...
WebStorm React JS语法报错问题
需要设置2处即可解决: 一.设置 javaScript language version 为 React jsx 二.设置ESLint Disable ESLint
Ubuntu下用webstorm开发Nodejs(二)
一.nodejs+express开发项目 package.json文件包含了应用程序的基本信息.其中"dependencies"部分描述了你想安装模块的名称和版本.该案例,接受Ex ...
Java小白前端后端开发环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】
这是我自己的环境搭建记录,分享给大家一起学习~~ 后续还会再补充自己做的小项目[含前端和后端] 如有任何问题,欢迎大家批评指正! 目录一.安装JDK 二.安装IDEA集成开发环境三.安装webst ...
React+Nodejs+MySQL全栈开发入门
内容介绍 1.开发环境准备安装Nodejs 第一个Nodejs程序 Nodejs和npm nodemon实现热启动使用nrm解决npm源的使用nvm管理Nodejs版本 2.Web应用基础 We ...

Webstorm React Nodejs 整合

Webstorm React Nodejs 整合相关推荐

最新文章

热门文章