亲手用npm开发React
一个简单的部署开发过程,需要已经了解npm,react和有一定terminal知识,通过此文可以简单了解到现代前端的开发过程,亲手配置一个开发过程,体会是难以言表的.
第零步 配置Node
第一步 初始化开发目录
创建一个根目录,名为: ReactNpm,并用npm init初始化,根据你的需求改变默认配置
$ mkdir ReactNpm
$ cd ReactNpm
$ npm init
package name: (reactnpm)
version: (1.0.0)
description:
entry point: (index.js) main.js
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /home/vic/Documents/react/ReactNpm/package.json:
{
"name": "reactnpm","version": "1.0.0","description": "","main": "main.js","scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},"author": "","license": "ISC"
}
Is this ok? (yes)
第二步 安装开发所需依赖
运行所需依赖React
npm install --save react
npm install --save react-dom
开发所需依赖Webpack
npm install --save-dev webpack
npm install --save-dev webpack-dev-server
开发所需依赖babel
npm install --save-dev babel-core
npm install --save-dev babel-loader
npm install --save-dev babel-preset-react
npm install --save-dev babel-preset-es2015
这时候,package.json应该是这样的
{
"name": "reactnpm","license": "ISC","dependencies": {
"react": "^15.6.1","react-dom": "^15.6.1"
},"devDependencies": {
"babel-core": "^6.25.0","babel-loader": "^7.1.1","babel-preset-es2015": "^6.24.1","babel-preset-react": "^6.24.1","webpack": "^3.4.1","webpack-dev-server": "^2.6.1"
}
}
第三步 为项目增加两个脚本
在package.json,scripts值下添加:
"build": "webpack","start": "webpack-dev-server --hot"
build选项是为了打包出生成后的js
start选项是为了hot-reload开发,hot-reload好处就在于不用刷新浏览器,可以直接查看新代码的改变
使用方法是
$ npm run start
所以,这时的package.json是这样的:
{
"name": "reactnpm","version": "1.0.0","description": "","main": "main.js","scripts": { "test": "echo \"Error: no test specified\" && exit 1","build": "webpack","start": "webpack-dev-server --hot" },"author": "","license": "ISC","dependencies": { "react": "^15.6.1","react-dom": "^15.6.1" },"devDependencies": { "babel-core": "^6.25.0","babel-loader": "^7.1.1","babel-preset-es2015": "^6.24.1","babel-preset-react": "^6.24.1","webpack": "^3.4.1","webpack-dev-server": "^2.6.1" } }
第四步 为项目创建必要文件
让我们创建index.html用于入口HTML,App.jsx是一个简单的Component组建,main.js作为我们的入口js,webpack.conf.js是webpack的配置文件
$ touch index.html
$ touch App.jsx
$ touch main.js
$ touch webpack.config.js
此时目录应该是这样的:
$ tree -L 1
.
├── App.jsx
├── index.html
├── main.js
├── node_modules
├── package.json
├── package-lock.json
└── webpack.config.js
1 directory,6 files
第五步 配置webpack
var path = require('path')
module.exports = {
entry: './main.js',output: {
path: path.resolve(__dirname,'./'),filename: 'bundle.js',},devServer: {
inline: true,port: 8080
},module: {
rules: [{
test: /.jsx?$/,exclude: /node_modules/,loader: 'babel-loader',query: {
presets: ['es2015','react']
}
}]
}
}
说明:
entry: webpack打包的入口 main.js
output：webpack打包输出，path为输出的文件夹，filename为打包输出文件名
devServer：开发服务器配置
module：定义了对模块的处理逻辑,当需要加载文件时,webpack会匹配test的正则，匹配成功就会调用其配置对文件进行处理
第六步 编辑页面代码
<!DOCTYPE html>
<html>
<head>
<title>React With npm</title>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<script src="bundle.js"> </script>
</body>
</html>
其中,bundle.js为webpack打包输出js的名字
import React from 'react'
export default class App extends React.Component {
render () {
return (<div> Hello World!</div>)
}
}
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App.jsx'
ReactDOM.render(
<App/>,document.body.appendChild(document.createElement('div'))
)
第七步 运行开发服务器
$ npm run start
通过浏览器访问 http://localhost:8080/,就可以看到我们激动人心的Hello World!!!
第八步 打包,生成bundle.js
$ npm run build
你就可以发现根目录下生成了bundle.js,然后你就可以大摇大摆那index.html和bundle.js去部署了,当然,这里还有很多工作没有做,我们下次在论.
后言
完成后,目录应该是这个样子的:
vic@$ tree -L 1
.
├── App.jsx
├── bundle.js
├── index.html
├── main.js
├── node_modules
├── package.json
├── package-lock.json
└── webpack.config.js
1 directory,7 files