这是一篇新手向文章,主要是记录一下使用过程,希望能给予别人一些帮助和提示
用 Yarn 做包管理
用 Babel 做jsx和es6语法编译器
Webpack 做模块管理和打包
教程是基于macOS的,Nodejs得提前安装好。我的Nodejs和npm的版本如下
node -v v6.9.2 npm -v 3.10.9
Yarn安装和配置
我们在 macOS 下可以通过brew
去安装,如下
brew update brew install yarn
Yarn 下载的包或者模块都是跟npm一个源的,因为某些原因,下载速度非常慢,难受,所以我们得换源
Yarn 换源和npm的源是一致的,都是共享.npmrc
的配置信息,所以修改给 npm 换源就是等于给 Yarn 换源,如下
npm set registry https://registry.npm.taobao.org npm set disturl https://npm.taobao.org/dist npm cache clean
通过查看.npmrc
文件检查是否更换源成功
vim ~/.npmrc
项目初始化
打开你的终端,新建文件夹然后进入该文件夹,用yarn init
去做初始化,过程类似npm init
,会有几个选项需要你填写,你可以根据你的需要去填写,这里我就直接一路回车就可以了。
mkdir react-demo cd react-demo yarn init
init
完之后,就会提示success Saved package.json
,说明初始化成功,我们可以查看一下package.json
有什么东西
vim package.json
{ "name": "react-demo","version": "1.0.0","main": "index.js","license": "MIT" }
webpack安装和配置
yarn add webpack webpack-dev-server path
安装完毕,你会发现当前目录多了个yarn.lock
,这个文件是Yarn用来锁定当前的依赖,不用担心
现在,我们已经安装好webpack了,我们需要一个配置文件用来执行,如下
touch webpack.config.js
const path = require('path'); module.exports = { entry: './client/index.js',output: { path: path.resolve('dist'),filename: 'index_bundle.js' },module: { loaders: [ { test: /\.js$/,loader: 'babel-loader',exclude: /node_modules/ },{ test: /\.jsx$/,exclude: /node_modules/ } ] } }
从配置文件内容可以看出,为了让webpack运行,我们需要一个入口entry
和一个输出output
为了能让JSX代码或者是ES6的代码也能正常在浏览器运行,我们需要loaders
去装载babel-loader
更多的loaders
我们可以查看 webpack文档
Babel安装和配置
yarn add babel-loader babel-core babel-preset-es2015 babel-preset-react --dev
在webpack配置过程中,我们用到了babel-loader
,除了这个外,我们同样需要babel的其他依赖
babel-preset-es2015
和 babel-preset-react
这两个是 Babel 的插件,告诉Babel将es2015
和react
的代码编译为Vanilla JS
安装完毕,我们还需要去配置Babel,新建一个文件为.babelrc
touch .babelrc
{ "presets":[ "es2015","react" ] }
webpack中的loader的 babel-loader
就是根据这个去执行
配置入口文件
现在我们的目录结构如下
|-- node_modules |-- .babelrc |-- package.json |-- webpack.config.js |-- yarn.lock
我们需要创建新的文件夹,同时在新文件夹内新建index.js
和index.html
文件
mkdir client cd client touch index.js touch index.html
然后我们更新一下index.js
的内容为
console.log('Hello world!')
同样地,我们也要更新一下index.html
内容为
<!DOCTYPE html> <html> <head> <Meta charset="utf-8"> <title>React App Setup</title> </head> <body> <div id="root"> </div> </body> </html>
index.html
是我们react组件运行在浏览器上的载体,react组件编写是jsx,同时也用到了es6,由于大多数浏览器是不支持es6和jsx,所以我们必须通过Babel编译这些代码,然后绑定输出显示在index.html上。
同时我们还需要html-webpack-plugin
包为我们生成html
cd .. yarn add html-webpack-plugin
安装完成后,打开webpack.config.js
然后添加下面配置信息
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ template: './client/index.html',filename: 'index.html',inject: 'body' }) module.exports = { ... module: { loaders: [ ... ] },plugins: [HtmlWebpackPluginConfig] }
我们引入html-webpack-plugin
,然后创建它的实例,然后配置template
、filename
和inject
,其中inject: 'body'
是告诉插件添加JavaScript到页尾,在闭合body标签前
为了可以运行它,我们需要配置package.json
,在"dependencies": {}
代码块前插入如下代码
"scripts": { "start": "webpack-dev-server" },
然后我们就可以运行了
yarn start
终端出现如下内容
Project is running at http://localhost:8080/
我们打开浏览器,输入http://localhost:8080/,在开发者工具的Console
,发现有一段信息为Hello world!
react安装与配置
yarn add react react-dom
然后进入client
目录,创建组件
cd client mkdir components cd components touch App.jsx cd ../..
现在我们项目目录结构如下
|-- node_modules |-- client |-- components |-- App.jsx |-- index.html |-- index.js |-- .babelrc |-- package.json |-- webpack.config.js |-- yarn.lock
import React from 'react'; export default class App extends React.Component { render() { return ( <div style={{textAlign: 'center'}}> <h1>Hello World Again</h1> </div>); } }
我们还需要修改一下我们的入口文件index.js
,替换内容为如下
import React from 'react'; import ReactDOM from 'react-dom'; import App from './components/App.jsx'; ReactDOM.render(<App />,document.getElementById('root'));
然后在终端输入yarn start
刷新http://localhost:8080/
,就能看到Hello World Again
至此,通过 Yarn 包管理,配置webpack和Babel,去搭建编写react组件的开发环境的新手向教程就此完毕
欢迎访问我的博客~ https://www.linpx.com/