![593b00050e0719277f53]()
请点击此处输入图片描述
浏览器正在逐步的支持原生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。
![593f0000c82e9863fc88]()
请点击此处输入图片描述
回退处理
如果用户的浏览器不支持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 type="module" src="app.js"></script>
<script nomodule src="/dist/build.js"></script></body>
这WebPack版本将在不同浏览器中的原生模块支持。在这里，它是在Firefox中，注意build.js加载的并不是模块：
![59420000d874ce0db1fe]()
请点击此处输入图片描述
性能比较
因为现在我们的应用程序的两个版本，一个使用本地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/592ee9b2b343f27b0ae1ba99
2.vuex 2 入门与提高: http://xc.hubwiz.com/course/597d463fff52d0da7e3e397a
3.vue-router 入门与提高: http://xc.hubwiz.com/course/5983d3aeff52d0da7e3e3d50
4.vue.js 工程化实践: http://xc.hubwiz.com/course/598bad66c7fd1d49453979c9
