八步亲手用npm开发React
亲手用npm开发React来自https://vicyu.com 一个简单的部署开发过程,需要已经了解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 使用方法是 $ 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打开webpack.config.js文件,添加以下代码: 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']
}
}]
}
}
说明: 第六步 编辑页面代码打开index.html,添加下列代码: <!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的名字 打开App.jsx,添加下列代码: import React from 'react'
export default class App extends React.Component {
render () {
return (<div> Hello World!</div>)
}
}
打开main.js,添加下列代码: 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 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |