React +es6 +webpack Getting Started

<span id="Label3"></p>React +es6 +webpack Getting Started<p><p></p></p><pre><pre><code>React已成为前端当下最热门的前端框架之一 ， 其虚拟DOM和组件化开发让前端开发更富灵活性，而Webpack凭借它异步加载和可分离打包等优秀的特性，更为React的开发提供了便利。其优秀的特性不再赘述。本文将详细的记录react babel webpack的环境搭建，以及搭建的过程中遇到的一些坑。</code></pre></pre><p><p>first, The new React project</p></p><p><p><br>1, for the new React Project structure, <strong>where entry.js Place react entry code, index.js Place react component code, Assets file is Webpack packaging after the storage address of the generated file</strong> .</p></p><p><p>Since the react code needs to be JSX to write, we modify the configuration in the Editor. I am using the Mac version of the webstorm, in such a place to modify the JSX hint configuration<br><br>First you have to install NPM and command line input</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs coffeescript"><span class="hljs-built_in">npm</span> install<span class="hljs-built_in">npm</span> init</code></pre></pre><p><p>New Node_modules</p></p><p><p>2, enter the following command to install the React module</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs brainfuck"><span class="hljs-comment">npm</span><span class="hljs-comment">i</span><span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-comment">save</span><span class="hljs-comment">react</span></code></pre></pre><p><p>We also need to install the react-dom because the react is reactdom independent after the Upgrade.</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs lasso">npm install react<span class="hljs-attribute">-dom</span><span class="hljs-subst">--</span>save<span class="hljs-attribute">-dev</span></code></pre></pre><p><p>Specific react code is introduced after installing Webpack</p></p><p><p>second, installation Webpack</p></p><p><p>1. What is webpack?</p></p><pre><pre><code>事实上它是一个打包工具，而不是像RequireJS或SeaJS这样的模块加载器，通过使用Webpack，能够像Node.js一样处理依赖关系，然后解析出模块之间的依赖，将代码打包</code></pre></pre><p><p>2, installation Webpack</p></p><p><p>Global Installation</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs bash"><span class="hljs-built_in">sudo</span> npm install -g webpack</code></pre></pre><p><p>Installation of this project</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs brainfuck"><span class="hljs-comment">npm</span><span class="hljs-comment">install</span><span class="hljs-comment">webpack</span><span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-comment">save</span><span class="hljs-literal">-</span><span class="hljs-comment">dev</span></code></pre></pre><p><p>3. Webpack Configuration</p></p><pre><pre><code>每个项目下都必须配置有一个 webpack.config.js ，它的作用如同常规的 gulpfile.js/Gruntfile.js ，就是一个配置项，告诉 webpack 它需要做什么。</code></pre></pre><p><p>Create a new JS file in the root directory webpack.config.js</p></p><p><p>The contents of the file are as follows</p></p><pre class="prettyprint"><code class=" hljs scala"><span class="hljs-javadoc"><span class="hljs-javadoc">/** * Created by Mac on 16/7/14.</span> * *</span><span class="hljs-keyword"><span class="hljs-keyword">var</span></span>Webpack = require (<span class="hljs-string"><span class="hljs-string">' Webpack '</span></span>);<span class="hljs-keyword"><span class="hljs-keyword">var</span></span>Path = require (<span class="hljs-string"><span class="hljs-string">' path '</span></span>); Module.exports = {<span class="hljs-comment"><span class="hljs-comment">//page Entry File configuration</span></span>Entry: {index: [<span class="hljs-string"><span class="hljs-string">' webpack-dev-server/client?http://localhost:5000 '</span></span>,<span class="hljs-string"><span class="hljs-string">' Webpack/hot/only-dev-server '</span></span>,<span class="hljs-string"><span class="hljs-string">'./js/entry.js '</span></span>] },<span class="hljs-comment"><span class="hljs-comment">//ingress file Output configuration</span></span>Output: {path: __dirname +<span class="hljs-string"><span class="hljs-string">'/assets/'</span></span>, filename:<span class="hljs-string"><span class="hljs-string">' Bundle.js '</span></span>}, Module: {<span class="hljs-comment"><span class="hljs-comment">//loader Configuration</span></span>Loaders: [{test:/\.css$/, Loader:<span class="hljs-string"><span class="hljs-string">' Style-loader!css-loader '</span></span>}, {test:/\.js$/, Loader:<span class="hljs-string"><span class="hljs-string">' Jsx-loader?harmony '</span></span>}, {test:/\. (png|jpg) $/, Loader:<span class="hljs-string"><span class="hljs-string">' url-loader?limit=8192 '</span></span>}, {test:/\.js|jsx$/, Loaders: [<span class="hljs-string"><span class="hljs-string">' React-hot '</span></span>,<span class="hljs-string"><span class="hljs-string">' babel?presets[]=es2015,presets[]=react,presets[]=stage-0 '</span></span>], Include:path.join (__dirname,<span class="hljs-string"><span class="hljs-string">' JS '</span></span>) } ] },<span class="hljs-comment"><span class="hljs-comment">//other Solution Configurations</span></span>Resolve: {extensions: [<span class="hljs-string"><span class="hljs-string">"'</span></span>,<span class="hljs-string"><span class="hljs-string">'. JS '</span></span>,<span class="hljs-string"><span class="hljs-string">'. json '</span></span>,<span class="hljs-string"><span class="hljs-string">'. scss '</span></span>] },<span class="hljs-comment"><span class="hljs-comment">//plugin Item</span></span>plugins: [<span class="hljs-keyword"><span class="hljs-keyword">New</span></span>Webpack. Hotmodulereplacementplugin (),<span class="hljs-keyword"><span class="hljs-keyword">New</span></span>Webpack. Noerrorsplugin ()]};</code></pre><pre><pre><code>这里对Webpack的打包行为做了配置，主要分为几个部分：entry：指定打包的入口文件，每有一个键值对，就是一个入口文件output：配置打包结果，path定义了输出的文件夹，filename则定义了打包结果文件的名称resolve：定义了解析模块路径时的配置，常用的就是extensions，可以用来指定模块的后缀，这样在引入模块时就不需要写后缀了，会自动补全module：定义了对模块的处理逻辑，这里可以用loaders定义了一系列的加载器，以及一些正则。当需要加载的文件匹配test的正则时，就会调用后面的loader对文件进行处理，这正是webpack强大的原因。比如这里定义了凡是 .js 结尾的文件都是用 babel-loader 做处理，而 .jsx 结尾的文件会先经过 jsx-loader 处理，然后经过 babel-loader 处理。当然这些loader也需要通过 npm install 安装plugins: 这里定义了需要使用的插件，这里使用了react-hot会在之后介绍</code></pre></pre><p><p>Installing the Loader sample</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs lasso">npm install jsx<span class="hljs-attribute">-loader</span><span class="hljs-subst">--</span>save<span class="hljs-attribute">-dev</span></code></pre></pre><p><p>In my Webpack.config file, the file entry for the index array in Js/entry.js,entry is the react-hot configuration used later, and if the plug-in is not used</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs css"><span class="hljs-tag">entry</span><span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">index</span>:<span class="hljs-value"> <span class="hljs-string">‘./js/entry.js‘</span> </span></span></span>},</code></pre></pre><p><p>After packing, the exit is Assets/bundle.js.</p></p><p><p>third, Installation Babel</p></p><p><p>1. Why Babel</p></p><pre><pre><code>能够实现 ES6 到 ES5 的代码转换多亏了 Babel (以前叫 6to5) 以及 Traceur 之类的项目。这些转换器 (更准确地说是源代码到源代码的编译器) 可以把你写的符合 ECMAScript 6 标准的代码完美地转换为 ECMAScript 5 标准的代码，并且可以确保良好地运行在所有主流 JavaScript 引擎中。</code></pre></pre><p><p>2, Installation Babel</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs cmake"><span class="hljs-keyword">install</span> -g babel</code></pre></pre><p><p>Commands available after completion to <code>sudo babel --help</code> see if the installation was successful</p></p><p><p>The Babel provides BABEL-CLI tools for command line Transcoding.</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs lasso">npm install babel<span class="hljs-attribute">-cli</span><span class="hljs-subst">--</span>save<span class="hljs-attribute">-dev</span></code></pre></pre><p><p>If some code needs to call Babel's API for transcoding, use the Babel-core module.</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs lasso">npm install babel<span class="hljs-attribute">-core</span><span class="hljs-subst">--</span>save<span class="hljs-attribute">-dev</span></code></pre></pre><p><p>The Babel configuration file is. babelrc, which is stored in the root directory of the Project. The first step in using Babel is to configure this File. Create a new. BABELRC file first<br>The file defaults to the following</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs json">{ "<span class="hljs-attribute">presets</span><span class="hljs-value">[]</span>, "<span class="hljs-attribute">plugins</span><span class="hljs-value">[]</span>}</code></pre></pre><p><p>The Presets field sets the transcoding rules, which are officially provided by the following rule set, which you can install as Needed.</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs ruby"><span class="hljs-comment"># ES2015转码规则</span><span class="hljs-variable">$ </span>npm install --save-dev babel-preset-es2015<span class="hljs-comment"># react转码规则</span><span class="hljs-variable">$ </span>npm install --save-dev babel-preset-react<span class="hljs-comment"># ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个</span><span class="hljs-variable">$ </span>npm install --save-dev babel-preset-stage-<span class="hljs-number">0</span><span class="hljs-variable">$ </span>npm install --save-dev babel-preset-stage-<span class="hljs-number">1</span><span class="hljs-variable">$ </span>npm install --save-dev babel-preset-stage-<span class="hljs-number">2</span><span class="hljs-variable">$ </span>npm install --save-dev babel-preset-stage-<span class="hljs-number">3</span></code></pre></pre><p><p>Then add the configuration in The. BABELRC file</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs json">{ "<span class="hljs-attribute">presets</span><span class="hljs-value">[ <span class="hljs-string">"es2015"</span>, <span class="hljs-string">"react"</span>, <span class="hljs-string">"stage-0"</span> ]</span>, "<span class="hljs-attribute">plugins</span><span class="hljs-value">[] </span>}</code></pre></pre><p><p>At this point in the Webpack.config file loader to add the configuration, let the package load Babel</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs css"> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">test</span>:<span class="hljs-value"> /\.js|jsx$/, loaders: [<span class="hljs-string">‘babel?presets[]=es2015,presets[]=react,presets[]=stage-0‘</span>] </span></span></span>},</code></pre></pre><p><p>Install Babel-loader at the same time</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs lasso">npm install babel<span class="hljs-attribute">-loader</span><span class="hljs-subst">--</span>save<span class="hljs-attribute">-dev</span></code></pre></pre><p><p>Attention! The order of presets here is consistent with the order Of. babelrc.</p></p><p><p>Not finished ~</p></p> <p><p>React +es6 +webpack Getting Started</p></p></span>