Наконец-то появилась поддержка браузером собственных модулей JavaScript. Последние версии Safari и Chrome поддерживают их, Firefox и Edge тоже скоро появятся.
Одна из замечательных особенностей модулей JavaScript для пользователей Vue.js заключается в том, что они позволяют вам организовать ваши компоненты в свои собственные файлы без какого-либо шага сборки.
В этой статье я покажу вам, как написать однофайловый компонент в виде модуля JavaScript и использовать его в приложении Vue.js. Вы можете сделать все это в браузере без каких-либо Babel или Webpack!
Когда я говорю «однофайловый компонент», я говорю об одном файле JavaScript, который экспортирует полное определение компонента. Я не говорю об одном файле .vue, к которому вы привыкли. Извините, если вы разочарованы. Но я все еще думаю, что это довольно круто, так что проверьте это.
Настройка проекта
Для этого воспользуемся простым шаблоном vue-cli . Это верно, тот, без какого-либо Webpack .
Оболочка
xxxxxxxxxx
1
$ vue init simple sfc-simple
Полный код для этого урока находится в репозитории GitHub, если вы хотите его скачать.
Перейдите в каталог и создайте нужные нам файлы:
Оболочка
xxxxxxxxxx
1
$ cd sfc-simple
2
$ touch app.js
3
$ touch SingleFileComponent.js
Удалите встроенный скрипт из index.html и вместо этого используйте теги скрипта для ссылки на наши модули. Обратите внимание на type="module"
атрибут:
HTML
xxxxxxxxxx
1
2
<html>
3
<head>
4
<title>Vue.js Single-File JavaScript Component Demo</title>
5
<script src="https://unpkg.com/vue"></script>
6
</head>
7
<body>
8
<div id="app"></div>
9
<script type="module" src="SingleFileComponent.js"></script>
10
<script type="module" src="app.js"></script>
11
</body>
12
</html>
Создание однофайлового компонента JavaScript
Этот компонент похож на любой другой созданный вами, только вы экспортируете объект конфигурации, так как это модуль:
SingleFileComponent.js
JavaScript
xxxxxxxxxx
1
export default {
2
template: `
3
<div>
4
<h1>Single-file JavaScript Component</h1>
5
<p>{{ message }}</p>
6
</div>
7
`,
8
data() {
9
return {
10
message: 'Oh hai from the component'
11
}
12
}
13
}
Теперь мы можем импортировать его и использовать в нашем приложении Vue:
app.js
JavaScript
xxxxxxxxxx
1
import SingleFileComponent from 'SingleFileComponent.js';
2
new Vue({
4
el: '#app',
5
components: {
6
SingleFileComponent
7
}
8
});
index.html
HTML
xxxxxxxxxx
1
<div id="app">
2
<single-file-component></single-file-component>
3
</div>
Обслуживание приложения
Для такого простого проекта все, что вам нужно, это статический сервер в командной строке с http-server
модулем:
Оболочка
xxxxxxxxxx
1
# This will serve the project directory at localhost:8080
2
$ http-server
Для просмотра приложения вам, разумеется, потребуется браузер, поддерживающий модули JavaScript. Я использую Chrome 61.
Отступать
Что если браузер пользователя не поддерживает модули JavaScript? Это будет иметь место для большинства пользователей на некоторое время.
Мы можем использовать тег script с nomodule
атрибутом, чтобы написать простое сообщение об ошибке в документе:
HTML
xxxxxxxxxx
1
<body>
3
<div id="app">
4
<single-file-component></single-file-component>
5
</div>
6
<script type="module" src="SingleFileComponent.js"></script>
7
<script type="module" src="app.js"></script>
8
<script nomodule>
9
document.getElementById("app").innerHTML = "Your browser doesn't support JavaScript modules :(";
10
</script>
11
</body>
Тем не менее, гораздо лучшим вариантом было бы использовать версию проекта в комплекте с Webpack. Этот простой конфиг сделает работу:
JavaScript
xxxxxxxxxx
1
var path = require('path')
2
var webpack = require('webpack')
3
module.exports = {
5
entry: './app.js',
6
output: {
7
path: path.resolve(__dirname, './dist'),
8
publicPath: '/dist/',
9
filename: 'build.js'
10
},
11
module: {
12
rules: [
13
{
14
test: /\.js$/,
15
loader: 'babel-loader',
16
exclude: /node_modules/
17
}
18
]
19
}
20
}
После сборки пакет можно загрузить в качестве резервного сценария:
HTML
xxxxxxxxxx
1
<body>
2
...
3
<script type="module" src="SingleFileComponent.js"></script>
4
<script type="module" src="app.js"></script>
5
<script nomodule src="/dist/build.js"></script>
6
</body>
Эта версия Webpack будет работать идентично в браузере без поддержки собственных модулей. Здесь, в Firefox, обратите внимание, что build.js загрузил, а не модуль:
Сравнение производительности
Поскольку теперь у нас есть две версии приложения, одна из которых использует собственную систему модулей JavaScript, а другая - Webpack, какая разница в производительности?
Использование системы модулей дает вам меньший размер проекта. Тем не менее, проект Webpack загружается быстрее в целом.
Примечание: эти цифры взяты из теста Lighthouse с сервером HTTP / 2.
Я подозреваю, что предварительная загрузка улучшила бы скорость проекта модулей, но мы немного рано для этого работаем:
Webpack по-прежнему является лучшим выбором для архитектур на основе модулей, но приятно знать, что нативные модули - вещь.