Автор оригинала: Anthony Gore.

Поддержка браузера для собственного JavaScript модулей наконец-то происходит. Последние версии Safari и Chrome поддерживают их, Firefox и Edge также скоро.

Одна из прохладных вещей о JavaScript Modules для пользователей Vue.js заключается в том, что они позволяют вам организовать свои компоненты в свои собственные файлы без каких-либо не требуемых шага сборки.

В этой статье я собираюсь показать вам, как написать одно файловый компонент в качестве модуля JavaScript и использовать его в приложении Vue.js. Вы можете сделать это все в браузере без каких-либо Babel или WebPack!

Когда я говорю «однофаблочный компонент», я говорю о одном файле JavaScript, который экспортирует полное определение компонента. Я не говорю об одном .vue файл, к которому вы привыкли. Извините, если вы разочарованы. Но я все еще думаю, что это довольно круто, поэтому проверьте это.

Примечание: эта статья была первоначально опубликована здесь на блоге разработчиков Vue.js на 2017/09/25.

Настройка проекта

Давайте использовать Vue-Cli простой шаблон, чтобы сделать это. Это верно, тот, который без учета

$ vue init simple sfc-simple

Полный код для этого учебника находится в Этот Github Reppo Если вы хотите скачать его.

Измените в каталог и создайте файлы, которые нам понадобится:

$ cd sfc-simple
$ touch app.js
$ touch SingleFileComponent.js

Удалите встроенный скрипт от index.html И вместо этого используйте теги скрипта для ссылки на наши модули. Обратите внимание на Тип = "Модуль" атрибут:

Создание однофазный компонент JavaScript

Это компонент, как и любой другой, который вы создали, только вы экспортируете объект конфигурации, поскольку это модуль:

ContinfileComponent.js.

export default {
  template: `
    

     
Single-file JavaScript Component
     
{{ message }}
    
  `,
  data() {
    return {
      message: 'Oh hai from the component'
    }
  }
}

Теперь мы можем импортировать его и использовать его в нашем приложении Vue:

app.js.

import SingleFileComponent from 'SingleFileComponent.js';

new Vue({
  el: '#app',
  components: {
    SingleFileComponent
  }
});

index.html.

Обслуживание приложения

Для простого проекта, как это все, что вам нужно, это статический сервер в командной строке с http-сервер Модуль:

# This will serve the project directory at localhost:8080
$ http-server

Чтобы просмотреть приложение, которое вы, конечно, должны использовать браузер, который поддерживает модули JavaScript. Я использую Chrome 61.

Отступать

Что, если браузер пользователя не поддерживает JavaScript Modules? Это будет иметь место для большинства пользователей на некоторое время.

Мы можем использовать тег скрипта с Nomodule Атрибут Чтобы написать простое сообщение об ошибке в документ:

Однако гораздо лучший замерзание, было бы использовать веб-папак в комплектую версию проекта. Этот простой конфиг сделает работу:

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/
      }
    ]
  }
}

После сборки Bundle теперь можно загрузить в виде резервного скрипта:

  ...
  
  
  

Эта версия WebPack будет работать в браузере без собственного модуля поддержки. Вот в Firefox, обратите внимание, что build.js загрузил и не модуль:

Сравнение производительности

Поскольку у нас теперь есть две версии приложения, которые можно использовать нативный модуль JavaScript, а другой, используя WebPack, какую разницу производительности?

Использование модульной системы дает вам меньший размер проекта. Однако проект WebPack загружает быстрее в целом.

Примечание. Эти цифры находятся из теста маяка с сервером HTTP/2.

Я подозреваю, что предварительная нагрузка улучшит скорость проекта модулей, но мы немного рано для этого работать:

WebPack по-прежнему является лучшим выбором для архитектур на основе модулей, но приятно знать, что родные модули – вещь.

Стать старшим Vue Developer в 2020 году.

Учитесь и осваивайте, какие профессионалы знают о строительстве, тестировании и развертывании, полностью стековых Vue Apps в нашем последнем курсе.

Учить больше