gulpによるReactタスクの構築
15126 ワード
例のReactバージョンはv 0である.14.2.
ディレクトリ構造の例は次のとおりです.
ここで、
ディレクトリ構造の例は次のとおりです.
- libs/
- react/
- node_modules/
- src/
- main.js
- gulpfile.js
- index.html
- bundle.js
- package.json
ここで、
index.htmlのコードは以下の通りである.
lang="en">
charset="UTF-8">
</span>Document<span class="nt"/>
<span class="nt"/>
<span class="nt"/>
<span class="nt"><div> <span class="na">id=</span><span class="s">"example"</span><span class="nt">></span></div></span>
<span class="nt"><script><span class="na">src=</span><span class="s">"bundle.js"</span><span class="nt">></script></span>
<span class="nt"/>
<span class="nt"/>
</span></span></span></code></pre>
</div>
</div>
<p><code>src/main.js</code> ：</p>
<div class="language-javascript highlighter-rouge">
<div class="highlight">
<pre><code><span class="kd">let</span> <span class="nx">React</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'react'</span><span class="p">);</span>
<span class="kd">let</span> <span class="nx">ReactDOM</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'react-dom'</span><span class="p">);</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span>
<span class="o"><</span><span class="nx">h1</span><span class="o">></span><span class="nx">Hello</span><span class="p">,</span> <span class="nx">world</span><span class="o">!<</span><span class="sr">/h1></span><span class="err">,
</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'example'</span><span class="p">)</span>
<span class="p">);</span>
</code></pre>
</div>
</div>
<p> ， browserify ，gulp 。 ES2015 JSX ， Babel 。</p>
<p> ：</p>
<div class="highlighter-rouge">
<div class="highlight">
<pre><code>npm install --save react react-dom
npm install --save-dev gulp browserify babelify vinyl-source-stream
</code></pre>
</div>
</div>
<p> <code>gulpfile.js</code> ：</p>
<div class="language-javascript highlighter-rouge">
<div class="highlight">
<pre><code><span class="kd">var</span> <span class="nx">gulp</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'gulp'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">browserify</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'browserify'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">babelify</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'babelify'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">source</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'vinyl-source-stream'</span><span class="p">);</span>
<span class="nx">gulp</span><span class="p">.</span><span class="nx">task</span><span class="p">(</span><span class="s1">'script:build'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">browserify</span><span class="p">(</span><span class="s1">'src/main.js'</span><span class="p">)</span>
<span class="p">.</span><span class="nx">transform</span><span class="p">(</span><span class="nx">babelify</span><span class="p">,</span> <span class="p">{</span>
<span class="na">presets</span><span class="p">:</span> <span class="p">[</span><span class="s1">'es2015'</span><span class="p">,</span> <span class="s1">'react'</span><span class="p">]</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">bundle</span><span class="p">()</span>
<span class="p">.</span><span class="nx">pipe</span><span class="p">(</span><span class="nx">source</span><span class="p">(</span><span class="s1">'bundle.js'</span><span class="p">))</span>
<span class="p">.</span><span class=" <a href="> gulp React nx">pipe</span><span class="p">(</span><span class="nx">gulp</span><span class="p">.</span><span class="nx">dest</span><span class="p">(</span><span class="s1">'./'</span><span class="p">));</span>
<span class="p">});</span>
<span class="nx">gulp</span><span class="p">.</span><span class="nx">task</span><span class="p">(</span><span class="s1">'default'</span><span class="p">,</span> <span class="p">[</span><span class="s1">'script:build'</span><span class="p">]);</span>
</code></pre>
</div>
</div>
<p> ， <code>babelify</code> preset， ：</p>
<div class="highlighter-rouge">
<div class="highlight">
<pre><code>npm install --save-dev babel-preset-es2015 babel-preset-react
</code></pre>
</div>
</div>
<p> <code>gulp</code> 。</p>
<p> <code>react</code> <code>react-dom</code> <code>bundle.js</code> 。</p>
<p> ， <code>index.html</code> ：</p>
<div class="language-html highlighter-rouge">
<div class="highlight">
<pre><code><span class="nt"><script><span class="na">src=</span><span class="s">"libs/react/react.min.js"</span><span class="nt">></script></span>
<span class="nt"><script><span class="na">src=</span><span class="s">"libs/react/react-dom.min.js"</span><span class="nt">></script></span>
</code></pre>
</div>
</div>
<p> <code>browserify-shim</code>， </p>
<div class="highlighter-rouge">
<div class="highlight">
<pre><code>npm install --save-dev browserify-shim
</code></pre>
</div>
</div>
<p> <code>package.json</code> ：</p>
<div class="highlighter-rouge">
<div class="highlight">
<pre><code>"browserify-shim": {
"react": "global:React",
"react-dom": "global:ReactDOM"
}
</code></pre>
</div>
</div>
<p> <code>gulpfile.js</code> ：</p>
<div class="language-javascript highlighter-rouge">
<div class="highlight">
<pre><code><span class="kd">var</span> <span class="nx">gulp</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'gulp'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">browserify</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'browserify'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">shim</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'browserify-shim'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">babelify</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'babelify'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">source</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'vinyl-source-stream'</span><span class="p">);</span>
<span class="nx">gulp</span><span class="p">.</span><span class="nx">task</span><span class="p">(</span><span class="s1">'script:build'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">browserify</span><span class="p">(</span><span class="s1">'src/main.js'</span><span class="p">)</span>
<span class="p">.</span><span class="nx">transform</span><span class="p">(</span><span class="nx">babelify</span><span class="p">,</span> <span class="p">{</span>
<span class="na">presets</span><span class="p">:</span> <span class="p">[</span><span class="s1">'es2015'</span><span class="p">,</span> <span class="s1">'react'</span><span class="p">]</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">transform</span><span class="p">(</span><span class="nx">shim</span><span class="p">)</span>
<span class="p">.</span><span class="nx">bundle</span><span class="p">()</span>
<span class="p">.</span><span class="nx">pipe</span><span class="p">(</span><span class="nx">source</span><span class="p">(</span><span class="s1">'bundle.js'</span><span class="p">))</span>
<span class="p">.</span><span class="nx">pipe</span><span class="p">(</span><span class="nx">gulp</span><span class="p">.</span><span class="nx">dest</span><span class="p">(</span><span class="s1">'./'</span><span class="p">));</span>
<span class="p">});</span>
<span class="nx">gulp</span><span class="p">.</span><span class="nx">task</span><span class="p">(</span><span class="s1">'default'</span><span class="p">,</span> <span class="p">[</span><span class="s1">'script:build'</span><span class="p">]);</span>
</code></pre>
</div>
</div>
<p> ， <code>.transform(shim)</code>。</p>
</div>
</div>
</div>