亲手用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

打开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']
            }
        }]
    }
}

说明:
entry: webpack打包的入口 main.js
output：webpack打包输出，path为输出的文件夹，filename为打包输出文件名
devServer：开发服务器配置
module：定义了对模块的处理逻辑,当需要加载文件时,webpack会匹配test的正则，匹配成功就会调用其配置对文件进行处理

第六步编辑页面 代码

打开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

八步亲手用npm开发React

亲手用npm开发React

第零步配置Node

第一步初始化开发目录

第二步安装开发所需依赖

第三步为项目增加两个脚本

第四步为项目创建必要文件

第五步配置webpack

第六步编辑页面 代码

第七步运行开发服务器

第八步打包,生成bundle.js

后言

猜你在找的React相关文章

八步亲手用npm开发React

亲手用npm开发React

第零步 配置Node

第一步 初始化开发目录

第二步 安装开发所需依赖

第三步 为项目增加两个脚本

第四步 为项目创建必要文件

第五步 配置webpack

第六步 编辑页面代码

第七步 运行开发服务器

第八步 打包,生成bundle.js

后言

猜你在找的React相关文章

第零步配置Node

第一步初始化开发目录

第二步安装开发所需依赖

第三步为项目增加两个脚本

第四步为项目创建必要文件

第五步配置webpack

第六步编辑页面代码

第七步运行开发服务器

第八步打包,生成bundle.js