請點選此處輸入圖檔描述
浏覽器正在逐漸的支援原生JavaScript子產品。Safari和Chrome的最新版本已經支援它們了，Firefox和Edge也将很快推出。
如果您是一個vue.js使用者，那關于JavaScript子產品一個很酷的事就是他們允許您編寫您的元件到自己的檔案中而無需任何多餘的建構步驟。
在這篇文章中，我将向您展示如何編寫一個JavaScript子產品到一個檔案中，并在vue.js APP中使用它。您可以在浏覽器中就做到這一切而不需要Babel或者Webpack！
當我說到“單檔案元件”時，我所說的是一個JavaScript檔案，它exports一個完整的元件定義。我說的不是您已經習慣使用的單一的.vue檔案。對不起，如果您很失望的話，但我仍然認為這很酷，是以來看一下。
項目配置
讓我們使用Vue-cli的simple模闆來試試。沒錯，不需要WebPack；）
$ vue init simple sfc-simple
本教程完整的源代碼在GitHub。（https://github.com/anthonygore/vue-single-file-js-components）
切換到相應的目錄并建立我們需要的檔案：
$ cd sfc-simple
$ touch app.js
$ touch SingleFileComponent.js
從index.html中删除内聯腳本，改為使用腳本标記連結到我們的子產品。請注意type="module"屬性：
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Single-File JavaScript Component Demo</title>
<script src="https://unpkg.com/vue"></script></head><body>
<div id="app"></div>
<script type="module" src="SingleFileComponent.js"></script>
<script type="module" src="app.js"></script></body></html>
建立單個檔案JavaScript元件
這是一個與您建立的任何其他元件一樣的元件，因為它是一個子產品是以隻是export 配置對象：
SingleFileComponent.js
export default {
template: `
<div>
<h1>Single-file JavaScript Component</h1>
<p>{{ message }}</p>
</div>
`,
data() {
return {
message: 'Oh hai from the component'
}
}
}
現在我們就可以在Vue的應用中import并使用它了：
app.js
import SingleFileComponent from 'SingleFileComponent.js';
new Vue({ el: '#app',
components: {
SingleFileComponent
}});
index.html
<div id="app"> <single-file-component></single-file-component></div>
應用程式中運作
對于像這樣的一個簡單項目，您隻需要在指令行上使用HTTP伺服器子產品的靜态伺服器即可：
# This will serve the project directory at localhost:8080
$ http-server 要檢視這個應用程式，您當然需要使用支援JavaScript子產品的浏覽器。我用的是Chrome 61。
回退處理
如果使用者的浏覽器不支援JavaScript子產品呢？對大多數使用者來說是這隻是暫時的。
我們可以用nomodule屬性腳本标簽寫的一個簡單的錯誤資訊的檔案：
<body> <div id="app">
<single-file-component></single-file-component>
</div>
<script type="module" src="SingleFileComponent.js"></script>
<script type="module" src="app.js"></script>
<script nomodule>
document.getElementById("app").innerHTML = "Your browser doesn't support JavaScript modules :(";
</script></body>
一個更好的辦法，是使用WebPack打包這個項目。下面這個簡單的配置将完成這項工作：
var path = require('path')
var webpack = require('webpack')
module.exports = { entry: './app.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
}}
生成之後，可以将該包作為回退腳本加載：
<body> ... <script type="module" src="SingleFileComponent.js"></script>
<script nomodule src="/dist/build.js"></script></body>
這WebPack版本将在不同浏覽器中的原生子產品支援。在這裡，它是在Firefox中，注意build.js加載的并不是子產品：
性能比較
因為現在我們的應用程式的兩個版本，一個使用本地JavaScript子產品系統，另外一個使用Webpack，性能有什麼差别嗎？
| Size | Time to first meaningful paint | |
|---|---|---|
| JavaScript modules | 80.7 KB | 2460 ms |
| Webpack | 83.7 KB | 2190 ms |
使用子產品，系統可以提供較小的項目。然而，該項目的整體負載WebPack更快。
注意：這些數字來自Lighthouse測試，其中有一個HTTP / 2伺服器。
我懷疑預加載會提高子產品項目的速度，但是我們這麼評判這項工作有點早。
WebPack仍是子產品架構的更好選擇，但當它了解本地子產品的話應該也會很高興。
彙智網小智翻譯，文章來自vuejsdevelopers.com。
彙智網提供vue.js 2、Angular 2 & 5、React 等最新線上課程，希望能給大家的學習帶來幫助！
分享最新的Vue.js 2 全家桶系列教程：
1.vue.js 入門與提高:
http://xc.hubwiz.com/course/592ee9b2b343f27b0ae1ba992.vuex 2 入門與提高:
http://xc.hubwiz.com/course/597d463fff52d0da7e3e397a3.vue-router 入門與提高:
http://xc.hubwiz.com/course/5983d3aeff52d0da7e3e3d504.vue.js 工程化實踐:
http://xc.hubwiz.com/course/598bad66c7fd1d49453979c9![今日頭條iOS用戶端啟動速度優化 技術調研 實測資料[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)