1.Initialization
//Execute at the command line:
cnpm init -y init //initializate a package.json file and -y can reduce your operating
git init //generate a .git file
gi windows,linux,node,webstorm >>.gitignore
manual add .idea/ to .gitignore
2.build webpack environment
//Execute at the command line:
cnpm install webpack -g //global installation,this step is necessary,otherwise maybe appear not found webpack
cnpm install webpack --save //install webpack dependence in the Project
3.create some essential file
//Execute at the command line:
touch entry.js bundle.js index.html
//add these contents to index.html
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8">
<title>test</title>
</head>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
//add these contents to entry.js
document.write('Hello World');
not need add content to bundle.js,because bundle.js content is packaged automatic generated
4.configuration webpack
//Execute at the command line:
touch webpack.config.js
//add these contents to webpack.config.js
module.exports = {
entry: "./entry.js", // import file
output: {
path: __dirname, //after packing the file path
filename: "bundle.js" }, //after packing the file name
module: {
loaders: [{ //loader some static configure
test:/\.(js|jsx)$/, //it's a regular expression,it 's necessary
loader: 'babel-loader', //loader's name ,it's necessary
exclude: /node_modules/, //it's unnecessary
query: { presets: ['react', 'es2015']}
]}
}
};
5.modify webpack in running commend
//add these contents to package.jaon
"scripts": {
"webpack": "webpack -d --watch" //automatic monitoring changes
}
//Execute at the command line:
cnpm run webpack
running index.html in browser and page display "Hello World",indacating configuration sucessfully!
6.build express frame
//Execute at the command line:
npm install express --save
touch server.js
//add these contents to server.js
let express = require("express");
let app = express();
app.use(express.static('./')); //access static file in current directory,default access index.html
let server = app.listen(3000, function () {
let port = server.address().port;
console.log("listening on port "+port);
});
7.install nodemon to automatic changes
//Execute at the command line:
cnpm install nodemon -g
cnpm install nodemon --save
//add these contents to package.jaon
"scripts": {
"start": "nodemon server.js",
}
//Execute at the command line:
cnpm start //equals to nodemon server.js,open server
browser access http://localhost:3000/ ,page display "Hello World",indacating running successfully!
8.install react,react-dom
//Execute at the command line:
npm install react react-dom --save-dev
9.install babel dependence and configure babel
//Execute at the command line:
npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev
touch .babelrc
//add this sentence to .babelrc
{ "presets": [ "es2015", "react" ] }
10.write a demo to test react can work
//add these contents to entry.js
import React,{component} from 'react';
import {render} from 'react-dom';
class Hello extends React.Component{
render(){
return<div>Hello world</div>
}
}
aim to render component in page,so we need to add the following sentence at index.html,equivalent a container
<div id="app"></div>
browser access http://localhost:3000/ ,page display "Hello World",running successfully!
11.install eslint aim to check code standard
//Execute at the command line:
cnpm install eslint -g
eslint --init //initializate eslint configure file,nedd to choose esstial y/n
eslint yourfile.js //test eslint can work
meanwhile,it's can automatic generate a .eslintrc.js file contains related configuration
12.install related loader at webpack
//Execute at the command line:
cnpm install css-loader file-loader --save-dev
//add these contents to webpack.config.js loaders:[]
{test:/\.css$/,loader:'css-loader'},
{test: /\.png$/, loader: 'file-loader'},
{test: /\.jpg$/, loader: 'file-loader'},
you can add .css and img file to test
if you want look code,please click my github address
Welcome to modify the correction~~
Original from this,I made some changes
