<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                合規國際互聯網加速 OSASE為企業客戶提供高速穩定SD-WAN國際加速解決方案。 廣告
                <article><h1>Laravel 的資源任務編譯器 Laravel Mix</h1><ul><li><a href="#introduction">簡介</a></li><li><a href="#installation">安裝與配置</a></li><li><a href="#running-mix">運行 Mix</a></li><li><a href="#working-with-stylesheets">使用樣式</a><ul><li><a href="#less">Less</a></li><li><a href="#sass">Sass</a></li><li><a href="#stylus">Stylus</a></li><li><a href="#postcss">PostCSS</a></li><li><a href="#plain-css">純 CSS</a></li><li><a href="#url-processing">URL 處理</a></li><li><a href="#css-source-maps">資源地圖</a></li></ul></li><li><a href="#working-with-scripts">使用腳本</a><ul><li><a href="#vendor-extraction">提取 Vendor</a></li><li><a href="#react-support">React</a></li><li><a href="#vanilla-js">原生 JS</a></li><li><a href="#custom-webpack-configuration">自定義 Webpack 配置</a></li></ul></li><li><a href="#copying-files-and-directories">復制文件與目錄</a></li><li><a href="#versioning-and-cache-busting">版本與緩存清除</a></li><li><a href="#browsersync-reloading">Browsersync 自動加載刷新</a></li><li><a href="#notifications">通知</a></li></ul><p><a name="introduction"></a></p><h2><a href="#introduction">簡介</a></h2><p>Laravel Mix 提供了簡潔流暢的 API,讓你能夠為你的 Laravel 應用定義 Webpack 的編譯任務。Mix 支持許多常見的 CSS 與 JavaScrtip 預處理器,通過簡單的方法,你可以輕松的管理資源。例如:</p><pre class=" language-php"><code class=" language-php">mix<span class="token punctuation">.</span><span class="token function">js<span class="token punctuation">(</span></span><span class="token string">'resources/assets/js/app.js'</span><span class="token punctuation">,</span> <span class="token string">'public/js'</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">sass<span class="token punctuation">(</span></span><span class="token string">'resources/assets/sass/app.scss'</span><span class="token punctuation">,</span> <span class="token string">'public/css'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p>如果你曾經對于使用 Webpack 及編譯資源感到困惑,那么你絕對會愛上 Laravel Mix。當然,在 Laravel 應用開發中使用 Mix 并不是必須的,你也可以選擇任何你喜歡的資源編譯工具,或者不使用任何工具。</p><p><a name="installation"></a></p><h2><a href="#installation">安裝</a></h2><h4>安裝 Node</h4><p>在開始使用 Mix 之前,你必須先確定你的開發環境上有安裝 Node.js 和 NPM。</p><pre class=" language-php"><code class=" language-php">node <span class="token operator">-</span>v npm <span class="token operator">-</span>v</code></pre><p>默認情況下, Laravel Homestead 會包含你所需的一切。當然,如果你沒有使用 Vagrant,那么你可以瀏覽 <a href="https://nodejs.org/en/download/">nodejs</a> 下載可視化的安裝工具來安裝最新版的 Node 和 NPM.</p><h4>Laravel Mix</h4><p>剩下的只需要安裝 Laravel Mix!隨著新安裝的 Laravel, 你會發現根目錄下有個名為 <code class=" language-php">package<span class="token punctuation">.</span>json</code> 的文件。就如同 <code class=" language-php">composer<span class="token punctuation">.</span>json</code> 文件, 只不過 <code class=" language-php">package<span class="token punctuation">.</span>json</code> 文件定義的是 Node 的依賴,而不是 PHP。你可以使用以下的命令安裝依賴擴展包:</p><pre class=" language-php"><code class=" language-php">npm install</code></pre><p>如果你使用的是 Windows 系統或運行在 Windows 系統上的 VM, 你需要在運行 <code class=" language-php">npm install</code> 命令時將 <code class=" language-php"><span class="token operator">--</span>no<span class="token operator">-</span>bin<span class="token operator">-</span>links</code> 開啟:</p><pre class=" language-php"><code class=" language-php">npm install <span class="token operator">--</span>no<span class="token operator">-</span>bin<span class="token operator">-</span>links</code></pre><p><a name="running-mix"></a></p><h2><a href="#running-mix">使用</a></h2><p>Mix 基于 <a href="https://webpack.js.org">Webpack</a> 的配置, 所以運行定義于 <code class=" language-php">package<span class="token punctuation">.</span>json</code> 文件中的 NPM 腳本即可執行 Mix 的編譯任務:</p><pre class=" language-php"><code class=" language-php"><span class="token comment" spellcheck="true">// 運行所有 Mix 任務... </span>npm run dev <span class="token comment" spellcheck="true"> // 運行所有 Mix 任務和壓縮資源輸出 </span>npm run production</code></pre><h4>監控資源文件修改</h4><p><code class=" language-php">npm run watch</code> 會在你的終端里持續運行,監控資源文件是否有發生改變。在 watch 命令運行的情況下,一旦資源文件發生變化,Webpack 會自動重新編譯:</p><pre class=" language-php"><code class=" language-php">npm run watch</code></pre><p>你可能會發現,在某些環境下,當你改變了你的文件的時候而 Webpack 并沒有同步更新。如果在你的系統中出現了這個問題,你可以考慮使用 <code class=" language-php">watch<span class="token operator">-</span>poll</code> 命令:</p><pre class=" language-php"><code class=" language-php">npm run watch<span class="token operator">-</span>poll</code></pre><p><a name="working-with-stylesheets"></a></p><h2><a href="#working-with-stylesheets">使用樣式</a></h2><p>項目根目錄的 <code class=" language-php">webpack<span class="token punctuation">.</span>mix<span class="token punctuation">.</span>js</code> 文件是資源編譯的入口。可以把它看作是 Webpack 的配置文件。Mix 任務可以使用鏈式調用的寫法來定義你的資源文件該如何進行編譯。</p><p><a name="less"></a></p><h3>Less</h3><p><code class=" language-php">less</code> 方法可以讓你將 <a href="http://lesscss.org/">Less</a> 編譯為 CSS。下面的命令可以把 <code class=" language-php">app<span class="token punctuation">.</span>less</code> 編譯為 <code class=" language-php"><span class="token keyword">public</span><span class="token operator">/</span>css<span class="token operator">/</span>app<span class="token punctuation">.</span>css</code>。</p><pre class=" language-php"><code class=" language-php">mix<span class="token punctuation">.</span><span class="token function">less<span class="token punctuation">(</span></span><span class="token string">'resources/assets/less/app.less'</span><span class="token punctuation">,</span> <span class="token string">'public/css'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p>多次調用 <code class=" language-php">less</code> 方法可以編譯多個文件:</p><pre class=" language-php"><code class=" language-php">mix<span class="token punctuation">.</span><span class="token function">less<span class="token punctuation">(</span></span><span class="token string">'resources/assets/less/app.less'</span><span class="token punctuation">,</span> <span class="token string">'public/css'</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">less<span class="token punctuation">(</span></span><span class="token string">'resources/assets/less/admin.less'</span><span class="token punctuation">,</span> <span class="token string">'public/css'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p>如果你想自定義編譯后的 CSS 文件名, 你可以傳遞一個完整的路徑到 <code class=" language-php">less</code> 方法的第二個參數:</p><pre class=" language-php"><code class=" language-php">mix<span class="token punctuation">.</span><span class="token function">less<span class="token punctuation">(</span></span><span class="token string">'resources/assets/less/app.less'</span><span class="token punctuation">,</span> <span class="token string">'public/stylesheets/styles.css'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p>如果你需要重寫 <a href="https://github.com/webpack-contrib/less-loader#options">底層 Less 插件選項</a>,你可以傳遞一個對象到 <code class=" language-php">mix<span class="token punctuation">.</span><span class="token function">less<span class="token punctuation">(</span></span><span class="token punctuation">)</span></code> 的第三個參數:</p><pre class=" language-php"><code class=" language-php">mix<span class="token punctuation">.</span><span class="token function">less<span class="token punctuation">(</span></span><span class="token string">'resources/assets/less/app.less'</span><span class="token punctuation">,</span> <span class="token string">'public/css'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> strictMath<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p><a name="sass"></a></p><h3>Sass</h3><p><code class=" language-php">sass</code> 方法可以讓你將 <a href="http://sass-lang.com/">Sass</a> 編譯為 CSS。你可以使用此方法:</p><pre class=" language-php"><code class=" language-php">mix<span class="token punctuation">.</span><span class="token function">sass<span class="token punctuation">(</span></span><span class="token string">'resources/assets/sass/app.scss'</span><span class="token punctuation">,</span> <span class="token string">'public/css'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p>同樣的,如同 <code class=" language-php">less</code> 方法, 你可以將多個 Sass 文件編譯為多個 CSS 文件,甚至可以自定義生成的 CSS 的輸出目錄:</p><pre class=" language-php"><code class=" language-php">mix<span class="token punctuation">.</span><span class="token function">sass<span class="token punctuation">(</span></span><span class="token string">'resources/assets/sass/app.sass'</span><span class="token punctuation">,</span> <span class="token string">'public/css'</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">sass<span class="token punctuation">(</span></span><span class="token string">'resources/assets/sass/admin.sass'</span><span class="token punctuation">,</span> <span class="token string">'public/css/admin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p>另外 <a href="https://github.com/sass/node-sass#options">Node-Sass 插件選項</a> 可以通過傳遞第三個參數來重寫:</p><pre class=" language-php"><code class=" language-php">mix<span class="token punctuation">.</span><span class="token function">sass<span class="token punctuation">(</span></span><span class="token string">'resources/assets/sass/app.sass'</span><span class="token punctuation">,</span> <span class="token string">'public/css'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> precision<span class="token punctuation">:</span> <span class="token number">5</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p><a name="stylus"></a></p><h3>Stylus</h3><p>類似于 Less 和 Sass,<code class=" language-php">stylus</code> 方法允許你編譯 <a href="http://stylus-lang.com/">Stylus</a> 為 CSS:</p><pre class=" language-php"><code class=" language-php">mix<span class="token punctuation">.</span><span class="token function">stylus<span class="token punctuation">(</span></span><span class="token string">'resources/assets/stylus/app.styl'</span><span class="token punctuation">,</span> <span class="token string">'public/css'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p>你也可以安裝其他的 Stylus 插件,例如 <a href="https://github.com/jescalan/rupture">Rupture</a>。首先,通過 NPM(<code class=" language-php">npm install rupture</code>) 來安裝插件,然后在調用 <code class=" language-php">mix<span class="token punctuation">.</span><span class="token function">stylus<span class="token punctuation">(</span></span><span class="token punctuation">)</span></code> 的時候引用插件:</p><pre class=" language-php"><code class=" language-php">mix<span class="token punctuation">.</span><span class="token function">stylus<span class="token punctuation">(</span></span><span class="token string">'resources/assets/stylus/app.styl'</span><span class="token punctuation">,</span> <span class="token string">'public/css'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token keyword">use</span><span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token keyword">require</span><span class="token punctuation">(</span><span class="token string">'rupture'</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p><a name="postcss"></a></p><h3>PostCSS</h3><p><a href="http://postcss.org/">PostCSS</a>,一個用來轉換 CSS 的強大工具,已經包含在 Laravel Mix 中。默認, Mix 利用了流行的 <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a> 插件來自動添加所需要的 CSS3 供應商前綴。不過,你也可以自由添加任何適合你應用程序的插件。首先,通過 NPM 來安裝想要的插件,然后在你的 <code class=" language-php">webpack<span class="token punctuation">.</span>mix<span class="token punctuation">.</span>js</code> 文件中引用:</p><pre class=" language-php"><code class=" language-php">mix<span class="token punctuation">.</span><span class="token function">sass<span class="token punctuation">(</span></span><span class="token string">'resources/assets/sass/app.scss'</span><span class="token punctuation">,</span> <span class="token string">'public/css'</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">options<span class="token punctuation">(</span></span><span class="token punctuation">{</span> postCss<span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token keyword">require</span><span class="token punctuation">(</span><span class="token string">'postcss-css-variables'</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p><a name="plain-css"></a></p><h3>純 CSS</h3><p>如果你只是想將一些純 CSS 樣式合并成單個的文件, 你可以使用 <code class=" language-php">styles</code> 方法。</p><pre class=" language-php"><code class=" language-php">mix<span class="token punctuation">.</span><span class="token function">styles<span class="token punctuation">(</span></span><span class="token punctuation">[</span> <span class="token string">'public/css/vendor/normalize.css'</span><span class="token punctuation">,</span> <span class="token string">'public/css/vendor/videojs.css'</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token string">'public/css/all.css'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p><a name="url-processing"></a></p><h3>URL 處理</h3><p>由于 Laravel Mix 是建立在 Webpack 之上,所以了解一些 Webpack 概念就非常有必要。編譯 CSS 的時候,Webpack 會重寫和優化那些你樣式表中調用 <code class=" language-php"><span class="token function">url<span class="token punctuation">(</span></span><span class="token punctuation">)</span></code> 的地方。 雖然可能一開始聽起來覺得奇怪,不過這確實是一個強大的功能。試想一下我們編譯一個包含相對路徑圖片的 Sass 文件:</p><pre class=" language-php"><code class=" language-php"><span class="token punctuation">.</span>example <span class="token punctuation">{</span> background<span class="token punctuation">:</span> <span class="token function">url<span class="token punctuation">(</span></span><span class="token string">'../images/example.png'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span></code></pre><blockquote class="has-icon note"><p><div class="flag"><span class="svg"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" version="1.1" x="0px" y="0px" width="90px" height="90px" viewBox="0 0 90 90" enable-background="new 0 0 90 90" xml:space="preserve"><path fill="#FFFFFF" d="M45 0C20.1 0 0 20.1 0 45s20.1 45 45 45 45-20.1 45-45S69.9 0 45 0zM45 74.5c-3.6 0-6.5-2.9-6.5-6.5s2.9-6.5 6.5-6.5 6.5 2.9 6.5 6.5S48.6 74.5 45 74.5zM52.1 23.9l-2.5 29.6c0 2.5-2.1 4.6-4.6 4.6 -2.5 0-4.6-2.1-4.6-4.6l-2.5-29.6c-0.1-0.4-0.1-0.7-0.1-1.1 0-4 3.2-7.2 7.2-7.2 4 0 7.2 3.2 7.2 7.2C52.2 23.1 52.2 23.5 52.1 23.9z"></path></svg></span></div> <code class=" language-php"><span class="token function">url<span class="token punctuation">(</span></span><span class="token punctuation">)</span></code> 方法會在 URL 重寫中排除絕對路徑。例如 <code class=" language-php"><span class="token function">url<span class="token punctuation">(</span></span><span class="token string">'/images/thing.png'</span><span class="token punctuation">)</span></code> 或者 <code class=" language-php"><span class="token function">url<span class="token punctuation">(</span></span><span class="token string">'http://example.com/images/thing.png'</span><span class="token punctuation">)</span></code> 不會被修改。</p></blockquote><p>Laravel Mix 和 Webpack 默認會找到 <code class=" language-php">example<span class="token punctuation">.</span>png</code>,把它復制到你的 <code class=" language-php"><span class="token keyword">public</span><span class="token operator">/</span>images</code> 目錄下,然后在你生成的樣式表中重寫 <code class=" language-php"><span class="token function">url<span class="token punctuation">(</span></span><span class="token punctuation">)</span></code>。這樣,你編譯之后的 CSS 會變成:</p><pre class=" language-php"><code class=" language-php"><span class="token punctuation">.</span>example <span class="token punctuation">{</span> background<span class="token punctuation">:</span> <span class="token function">url<span class="token punctuation">(</span></span><span class="token operator">/</span>images<span class="token operator">/</span>example<span class="token punctuation">.</span>png<span class="token operator">?</span>d41d8cd98f00b204e9800998ecf8427e<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span></code></pre><p>與此功能相同,可能你的現在的文件夾結構已經按照你喜歡的方式來配置。如果是這種情況,你可以像這樣來禁用 <code class=" language-php"><span class="token function">url<span class="token punctuation">(</span></span><span class="token punctuation">)</span></code> 重寫:</p><pre class=" language-php"><code class=" language-php">mix<span class="token punctuation">.</span><span class="token function">sass<span class="token punctuation">(</span></span><span class="token string">'resources/assets/app/app.scss'</span><span class="token punctuation">,</span> <span class="token string">'public/css'</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">options<span class="token punctuation">(</span></span><span class="token punctuation">{</span> processCssUrls<span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p>如果在你的 <code class=" language-php">webpack<span class="token punctuation">.</span>mix<span class="token punctuation">.</span>js</code> 文件這樣配置之后,Mix 將不再匹配 <code class=" language-php"><span class="token function">url<span class="token punctuation">(</span></span><span class="token punctuation">)</span></code> 或者復制 assets 到你的 public 目錄。換句話來說,編譯后的 CSS 跟你原來輸入的看起來一樣:</p><pre class=" language-php"><code class=" language-php"><span class="token punctuation">.</span>example <span class="token punctuation">{</span> background<span class="token punctuation">:</span> <span class="token function">url<span class="token punctuation">(</span></span><span class="token string">"../images/thing.png"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span></code></pre><p><a name="css-source-maps"></a></p><h3>資源地圖</h3><p>source maps 默認狀態下是禁用的,你可以通過在 <code class=" language-php">webpack<span class="token punctuation">.</span>mix<span class="token punctuation">.</span>js</code> 文件中調用 <code class=" language-php">mix<span class="token punctuation">.</span><span class="token function">sourceMaps<span class="token punctuation">(</span></span><span class="token punctuation">)</span></code> 方法來開啟。它會帶來一些編譯成本,但在使用編譯后的資源文件時可以更方便的在瀏覽器中進行調試:</p><pre class=" language-php"><code class=" language-php">mix<span class="token punctuation">.</span><span class="token function">js<span class="token punctuation">(</span></span><span class="token string">'resources/assets/js/app.js'</span><span class="token punctuation">,</span> <span class="token string">'public/js'</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">sourceMaps<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p><a name="working-with-scripts"></a></p><h2><a href="#working-with-scripts">使用腳本</a></h2><p>Mix 也提供了一些函數來幫助你使用 JavaScript 文件,像是編譯 ECMAScript 2015、模塊編譯、壓縮、及簡單的串聯純 JavaScript 文件。更棒的是,這些都不需要自定義的配置:</p><pre class=" language-php"><code class=" language-php">mix<span class="token punctuation">.</span><span class="token function">js<span class="token punctuation">(</span></span><span class="token string">'resources/assets/js/app.js'</span><span class="token punctuation">,</span> <span class="token string">'public/js'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p>這一行簡單的代碼,支持:</p><div class="content-list"><ul><li>ECMAScript 2015 語法.</li><li>Modules</li><li>編譯 <code class=" language-php"><span class="token punctuation">.</span>vue</code> 文件.</li><li>針對生產環境壓縮代碼.</li></ul></div><p><a name="vendor-extraction"></a></p><h3>Vendor Extraction</h3><p>將應用程序的 JavaScript 與依賴庫捆綁在一起的一個潛在缺點是,使得長期緩存更加困難。如,對應用程序代碼的單獨更新將強制瀏覽器重新下載所有依賴庫,即使它們沒有更改。</p><p>如果你打算頻繁更新應用程序的 JavaScript,應該考慮將所有的依賴庫提取到單獨文件中。這樣,對應用程序代碼的更改不會影響 vendor.js 文件的緩存。Mix 的 <code class=" language-php">extract</code> 方法可以輕松做到:</p><pre class=" language-php"><code class=" language-php">mix<span class="token punctuation">.</span><span class="token function">js<span class="token punctuation">(</span></span><span class="token string">'resources/assets/js/app.js'</span><span class="token punctuation">,</span> <span class="token string">'public/js'</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">extract<span class="token punctuation">(</span></span><span class="token punctuation">[</span><span class="token string">'vue'</span><span class="token punctuation">]</span><span class="token punctuation">)</span></code></pre><p><code class=" language-php">extract</code> 方法接受你希望提取到 <code class=" language-php">vendor<span class="token punctuation">.</span>js</code> 文件中的所有的依賴庫或模塊的數組。使用以上代碼片段作為示例,Mix 將生成以下文件:</p><div class="content-list"><ul><li><code class=" language-php"><span class="token keyword">public</span><span class="token operator">/</span>js<span class="token operator">/</span>manifest<span class="token punctuation">.</span>js</code>: <em>Webpack 顯示運行時</em></li><li><code class=" language-php"><span class="token keyword">public</span><span class="token operator">/</span>js<span class="token operator">/</span>vendor<span class="token punctuation">.</span>js</code>: <em>依賴庫</em></li><li><code class=" language-php"><span class="token keyword">public</span><span class="token operator">/</span>js<span class="token operator">/</span>app<span class="token punctuation">.</span>js</code>: <em>應用代碼</em></li></ul></div><p>為了避免 <code class=" language-php">JavaScript</code> 錯誤,請務必按正確的順序加載這些文件:</p><pre class=" language-php"><code class=" language-php"><span class="token markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/js/manifest.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span></span><span class="token markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span> <span class="token markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/js/vendor.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span></span><span class="token markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span> <span class="token markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/js/app.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span></span><span class="token markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span></code></pre><p><a name="react"></a></p><h3>React</h3><p>Mix 可以自動安裝 Babel 插件來支持 React。你只需要替換你的 <code class=" language-php">mix<span class="token punctuation">.</span><span class="token function">js<span class="token punctuation">(</span></span><span class="token punctuation">)</span></code> 變成 <code class=" language-php">mix<span class="token punctuation">.</span><span class="token function">react<span class="token punctuation">(</span></span><span class="token punctuation">)</span></code> 即可:</p><pre class=" language-php"><code class=" language-php">mix<span class="token punctuation">.</span><span class="token function">react<span class="token punctuation">(</span></span><span class="token string">'resources/assets/js/app.jsx'</span><span class="token punctuation">,</span> <span class="token string">'public/js'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p>在背后,React 會自動下載,并且自動下載適當的 <code class=" language-php">babel<span class="token operator">-</span>preset<span class="token operator">-</span>react</code> Babel 插件。</p><p><a name="vanilla-js"></a></p><h3>原生 JS</h3><p>類似使用 <code class=" language-php">mix<span class="token punctuation">.</span><span class="token function">styles<span class="token punctuation">(</span></span><span class="token punctuation">)</span></code> 來組合多個樣式表一樣,你也可以使用 <code class=" language-php"><span class="token function">scripts<span class="token punctuation">(</span></span><span class="token punctuation">)</span></code> 方法來合并并且壓縮多個 JavaScript 文件:</p><pre class=" language-php"><code class=" language-php">mix<span class="token punctuation">.</span><span class="token function">scripts<span class="token punctuation">(</span></span><span class="token punctuation">[</span> <span class="token string">'public/js/admin.js'</span><span class="token punctuation">,</span> <span class="token string">'public/js/dashboard.js'</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token string">'public/js/all.js'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p>這個選項對于那些沒有使用 Webpack 的歷史項目非常有用。</p><blockquote class="has-icon tip"><p><div class="flag"><span class="svg"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" version="1.1" x="0px" y="0px" width="56.6px" height="87.5px" viewBox="0 0 56.6 87.5" enable-background="new 0 0 56.6 87.5" xml:space="preserve"><path fill="#FFFFFF" d="M28.7 64.5c-1.4 0-2.5-1.1-2.5-2.5v-5.7 -5V41c0-1.4 1.1-2.5 2.5-2.5s2.5 1.1 2.5 2.5v10.1 5 5.8C31.2 63.4 30.1 64.5 28.7 64.5zM26.4 0.1C11.9 1 0.3 13.1 0 27.7c-0.1 7.9 3 15.2 8.2 20.4 0.5 0.5 0.8 1 1 1.7l3.1 13.1c0.3 1.1 1.3 1.9 2.4 1.9 0.3 0 0.7-0.1 1.1-0.2 1.1-0.5 1.6-1.8 1.4-3l-2-8.4 -0.4-1.8c-0.7-2.9-2-5.7-4-8 -1-1.2-2-2.5-2.7-3.9C5.8 35.3 4.7 30.3 5.4 25 6.7 14.5 15.2 6.3 25.6 5.1c13.9-1.5 25.8 9.4 25.8 23 0 4.1-1.1 7.9-2.9 11.2 -0.8 1.4-1.7 2.7-2.7 3.9 -2 2.3-3.3 5-4 8L41.4 53l-2 8.4c-0.3 1.2 0.3 2.5 1.4 3 0.3 0.2 0.7 0.2 1.1 0.2 1.1 0 2.2-0.8 2.4-1.9l3.1-13.1c0.2-0.6 0.5-1.2 1-1.7 5-5.1 8.2-12.1 8.2-19.8C56.4 12 42.8-1 26.4 0.1zM43.7 69.6c0 0.5-0.1 0.9-0.3 1.3 -0.4 0.8-0.7 1.6-0.9 2.5 -0.7 3-2 8.6-2 8.6 -1.3 3.2-4.4 5.5-7.9 5.5h-4.1H28h-0.5 -3.6c-3.5 0-6.7-2.4-7.9-5.7l-0.1-0.4 -1.8-7.8c-0.4-1.1-0.8-2.1-1.2-3.1 -0.1-0.3-0.2-0.5-0.2-0.9 0.1-1.3 1.3-2.1 2.6-2.1H41C42.4 67.5 43.6 68.2 43.7 69.6zM37.7 72.5H26.9c-4.2 0-7.2 3.9-6.3 7.9 0.6 1.3 1.8 2.1 3.2 2.1h4.1 0.5 0.5 3.6c1.4 0 2.7-0.8 3.2-2.1L37.7 72.5z"></path></svg></span></div> <code class=" language-php">mix<span class="token punctuation">.</span><span class="token function">babel<span class="token punctuation">(</span></span><span class="token punctuation">)</span></code> 和 <code class=" language-php">mix<span class="token punctuation">.</span><span class="token function">scripts<span class="token punctuation">(</span></span><span class="token punctuation">)</span></code> 有點稍微不一樣。<code class=" language-php">babel</code> 方法用法和 <code class=" language-php">scripts</code> 一樣;不過,這些文件會經過 Babel 編譯,把所有 ES2015 的代碼轉換為原生 JavaScript,這樣所有瀏覽器都能識別。</p></blockquote><p><a name="custom-webpack-configuration"></a></p><h3>自定義 Webpack 配置</h3><p>Laravel Mix 默認引用了一個預先配置的 <code class=" language-php">webpack<span class="token punctuation">.</span>config<span class="token punctuation">.</span>js</code> 文件,以便盡快啟動和運行。有時,你可能需要手動修改此文件。例如,你可能有一個特殊的加載器或插件需要被引用,或者也許你喜歡使用 Stylus 而不是 Sass。在這種情況下,你有兩個選擇:</p><h4>合并</h4><p>Mix 提供了一個有用的 <code class=" language-php">webpackConfig</code> 方法,允許合并任何 <code class=" language-php">Webpack</code> 配置以覆蓋默認配置。這是一個非常好的選擇,你不需要復制和維護 <code class=" language-php">webpack<span class="token punctuation">.</span>config<span class="token punctuation">.</span>js</code> 文件。webpackConfig 方法接受一個對象,該對象應包含要應用的任何 <a href="https://webpack.js.org/configuration/">Webpack 配置項</a>:</p><pre class=" language-php"><code class=" language-php">mix<span class="token punctuation">.</span><span class="token function">webpackConfig<span class="token punctuation">(</span></span><span class="token punctuation">{</span> resolve<span class="token punctuation">:</span> <span class="token punctuation">{</span> modules<span class="token punctuation">:</span> <span class="token punctuation">[</span> path<span class="token punctuation">.</span><span class="token function">resolve<span class="token punctuation">(</span></span>__dirname<span class="token punctuation">,</span> <span class="token string">'vendor/laravel/spark/resources/assets/js'</span><span class="token punctuation">)</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p><a name="copying-files-and-directories"></a></p><h2><a href="#copying-files-and-directories">復制文件與目錄</a></h2><p><code class=" language-php">copy</code> 方法可以復制文件與目錄至新位置。當 <code class=" language-php">node_modules</code> 目錄中的特定資源需要復制到 <code class=" language-php"><span class="token keyword">public</span></code> 文件夾時會很有用。</p><pre class=" language-php"><code class=" language-php">mix<span class="token punctuation">.</span><span class="token function">copy<span class="token punctuation">(</span></span><span class="token string">'node_modules/foo/bar.css'</span><span class="token punctuation">,</span> <span class="token string">'public/css/bar.css'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p><a name="versioning-and-cache-busting"></a></p><h2><a href="#versioning-and-cache-busting">版本與緩存清除</a></h2><p>許多的開發者會在它們編譯后的資源文件中加上時間戳或是唯一的 token,強迫瀏覽器加載全新的資源文件以取代提供的舊版本代碼副本。你可以使用 version 方法讓 Mix 處理它們。</p><p><code class=" language-php">version</code> 方法為你的文件名稱加上唯一的哈希值,以防止文件被緩存:</p><pre class=" language-php"><code class=" language-php">mix<span class="token punctuation">.</span><span class="token function">js<span class="token punctuation">(</span></span><span class="token string">'resources/assets/js/app.js'</span><span class="token punctuation">,</span> <span class="token string">'public/js'</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">version<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p>在為文件生成版本之后,你將不知道確切的文件名。因此,你應該在你的視圖 中使用 Laravel 的全局 <code class=" language-php">mix</code> PHP 輔助函數來正確加載名稱被哈希后的文件。 <code class=" language-php">mix</code> 函數會自動判斷被哈希的文件名稱:</p><pre class=" language-php"><code class=" language-php"><span class="token markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{{ mix('/css/app.css') }}<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span></span></code></pre><p>在開發中通常是不需要版本化,你可能希望僅在運行 <code class=" language-php">npm run production</code> 的時候進行版本化:</p><pre class=" language-php"><code class=" language-php">mix<span class="token punctuation">.</span><span class="token function">js<span class="token punctuation">(</span></span><span class="token string">'resources/assets/js/app.js'</span><span class="token punctuation">,</span> <span class="token string">'public/js'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>mix<span class="token punctuation">.</span>config<span class="token punctuation">.</span>inProduction<span class="token punctuation">)</span> <span class="token punctuation">{</span> mix<span class="token punctuation">.</span><span class="token function">version<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span></code></pre><p><a name="browsersync-reloading"></a></p><h2><a href="#browsersync-reloading">Browsersync 自動加載刷新</a></h2><p><a href="https://browsersync.io/">BrowserSync</a> 可以監控你的文件變化,并且無需手動刷新就可以把你的變化注入到瀏覽器中。你可以通過調用 <code class=" language-php">mix<span class="token punctuation">.</span><span class="token function">browserSync<span class="token punctuation">(</span></span><span class="token punctuation">)</span></code> 方法來啟用這個功能支持:</p><pre class=" language-php"><code class=" language-php">mix<span class="token punctuation">.</span><span class="token function">browserSync<span class="token punctuation">(</span></span><span class="token string">'my-domain.dev'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true"> // 或者... </span><span class="token comment" spellcheck="true"> // https://browsersync.io/docs/options </span>mix<span class="token punctuation">.</span><span class="token function">browserSync<span class="token punctuation">(</span></span><span class="token punctuation">{</span> proxy<span class="token punctuation">:</span> <span class="token string">'my-domain.dev'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p>你可以通過傳遞一個字符串 (代理) 或者一個對象 (BrowserSync 設置) 給這個方法。接著,使用 <code class=" language-php">npm run watch</code> 命令來開啟 Webpack 的開發服務器。現在,當你修改一個腳本或者 PHP 文件,看著瀏覽器立即刷新出來的頁面來反饋你的改變。</p><p><a name="notifications"></a></p><h2><a href="#notifications">通知</a></h2><p>在可用的時候,Mix 會將每個包的編譯是否成功以系統通知的方式反饋給你。如果你希望停用這些通知,可以通過 <code class=" language-php">disableNotifications</code> 方法實現:</p><pre class=" language-php"><code class=" language-php">mix<span class="token punctuation">.</span><span class="token function">disableNotifications<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><h2>譯者署名</h2><table><thead><tr><th>用戶名</th><th>頭像</th><th>職能</th><th>簽名</th></tr></thead><tbody><tr><td><a href="https://github.com/cmzz">@zyxcba</a></td><td><img class="avatar-66 rm-style" src="https://avatars3.githubusercontent.com/u/6111715?v=3&amp;s=100"></td><td>翻譯</td><td><a href="http://kaolake.net">考拉客</a> - 考拉微商店主加盟立返100元!</td></tr></tbody></table></article>
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看