配置React的Babel 6和Webpack 2环境
Facebook的一帮子工程师在忙碌之余开发除了一套前段UI框架
虽然学 现在开始进入正题创建一个目录react-demo的目录,并在里面初始化npm项目。 mkdir react-demo cd react-demo npm init 按照要求填写 安装配置Webpack
使用npm安装webpack。 npm install webpack --save-dev Webpack需要某些配置才能完成给他的工作。所以我们需要创建一个 touch webpack.config.js 在该文件中添加如下的代码。 var webpack = require('webpack'); var path = require('path'); var BUILD_DIR = path.resolve(__dirname,'src/client/public'); var APP_DIR = path.resolve(__dirname,'src/client/app'); var config = { entry: APP_DIR + '/index.jsx',output: { path: BUILD_DIR,filename: 'bundle.js' } }; module.exports = config; Webpack的配置最少需要两项,一个是入口属性,一个是输出属性。 就如同配置项名称所表达的一样。entry是打包所需要的入口文件。如果你对静态语言,比如c/c++之类的熟悉的话。这个入口文件就是c/c++包含main方法的文件。Webpack支持多个入口文件。这里目录src/client/app里的index.jsx文件就是整个应用的入口文件。 output指明webpack在打包完成后需要做什么。这里,使用src/client/public目录存放打包后生成的文件bundle.js。 在src/client/app目录下创建文件index.jsx。并添加如下代码。 console.log('Hello World!'); 在terminal里输入下面的命令。 $ ./node_modules/.bin/webpack -d 命令会调用webpack,生成开发环境下的bundle.js文件以及关联的map文件bundle.js.map。这两个文件都在配置文件制定的目录src/client/public下。 但是目前只看到了编译之后的js文件,不够直观。在目录src/client下创建一个index.html文件。这样js文件是否加载成功都能看到了。 <html> <head> <meta charset="utf-8"> <title>React.js using NPM,Babel6 and Webpack</title> </head> <body> <div id="app" /> <script src="public/bundle.js" type="text/javascript"></script> <span style="float:center">Yo!</span> </body> </html> 现在打开浏览器,你就会看到“Yo”了。 有一个webpack的加载器`html-loader`可以自动创建html文件。里面会把编译以后的js文件的路径添加好。 使用Babel-Loader就如前文所说,使用JSX和ES2015我们的开发效率会更高。但是JSX语法和ES2015在某些浏览器里是不兼容的。 因此,如果我们要使用React代码,我们就需要使用一个工具把JSX和ES2015翻译成浏览器都支持的语法。 在安装webpack的时候我们就接触到了一个概念加载器,Webpack就是用这个加载器来翻译指定的文件的。 使用npm安装babel-loader。 npm install babel-loader babel-preset-es2015 babel-preset-react --save-dev babel-preset-es2015和babel-preset-react是 创建一个.babelrc的文件,并添加一下内容。 touch .babelrc { "presets": ["es2015","react"] } 下一步就是告诉webpack使用 var webpack = require('webpack'); var path = require('path'); var BUILD_DIR = path.resolve(__dirname,output: { path: BUILD_DIR,filename: 'bundle.js' },module: { rules: [ { test: /.jsx$/,use: [ 'babel-loader',],include: [ // path.resolve(__dirname,"app") APP_DIR ],},}; module.exports = config;
现在环境配置就都完成了。下面写几行代码体验一下。 Hello React使用npm安装react和react-dom。 npm install react react-dom --save 把index.jsx文件里的 import React from 'react'; import {render} from 'react-dom'; class App extends React.Component { render() { return <p> Yo,React </p> } } render(<App />,document.getElementById('app')); 执行我们上面说的命令。 ./node_modules/.bin/webpack -d 现在你就可以在浏览器里看到Yo React了。 更进一步让webpack监视文件变化每次修改了文件之后还要停止-启动一次webpack的命令实在是太麻烦了。我们可以简单的修改一下命令。 ./node_modules/.bin/webpack -d --watch 现在webpack就在监视模式下运行了,每次文件修改发生之后都会自动打包。要看到实际效果,可以把Yo React修改成任何其他的字符串。之后在浏览器里刷新一下就会看到结果。 如果你连刷新浏览器都懒得可以使用react-hot-loader。 使用npm运行命令 在packages.json文件里修改。 "scripts": { "test": "echo "Error: no test specified" && exit 1","dev": "webpack -d --watch","build": "webpack -p" }, 现在使用命令 添加一些文件在示例中,我们只有一个叫做 创建一个新的文件叫做AwesomeComponent.jsx,并添加如下代码。 import React from 'react'; class AwesomeComponent extends React.Component { constructor(props) { super(props); this.state = {likesCount: 0}; this.onLike = this.onLike.bind(this); } onLike() { let newLikesCount = this.state.likesCount + 1; this.setState({likesCount: newLikesCount}); } render() { return ( <div> Likes: <span>{this.state.likesCount}</span> <div><button onClick={this.onLike}>Like Me</button></div> </div> ); } } export default AwesomeComponent; 在index.jsx文件中引入。 import React from 'react'; import {render} from 'react-dom'; import AwesomeComponent from './AwesomeComponent.js'; class App extends React.Component { render() { return ( <div> <p> Yo,React </p> <AwesomeComponent /> </div> ) } } render(<App />,document.getElementById('app')); 如果webpack已经运行在监视模式下了,那么直接刷新一下浏览器就可以看到 总结本文可以用来指导你配置React的开发环境。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |