Можно ли использовать ES6 в Chrome Extension?

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

В следующей таблице совместимости, Chrome 41 показывает, что в настоящее время она совместима с 41%. Пара ключевых функций, таких как class, не включена в этот 41%, и поэтому мне было любопытно, есть ли другие варианты, такие как пересылка.

Я уже использовал Babel, транспилер ES6, с Ember CLI, и он отлично поработал.

Тем не менее, я считаю, что процесс сборки немного отличается при разработке расширения хром. Например, при тестировании расширения, которое я разрабатываю, я загружаю его в браузер через опцию "Load unpacked extension", которая указывает прямо на исходный код.

Для расширения, которое я создаю, я использую генератор chrome chrome yeoman в качестве базы. В идеале я хотел бы создать какую-то задачу grunt, которая перехватывает задачу debug, а затем преобразует код в любое время, когда он будет изменен в отдельный каталог. Оттуда я мог загрузить содержимое этого каталога с помощью опции load unpacked extension. Однако я не совсем уверен, как это сделать или если есть другие варианты.

Ответ 1

Обновить. Этот ответ был изначально написан в 2015 году. Ссылка на таблицу совместимости показывает, что Chrome, FF, Edge и Safari более совместимы, чем Babel.

Chrome 49+, FF 45+, возможно, не выиграют от Babel. Другие браузеры, возможно, нуждаются в транспиляции.

Оригинал

В настоящее время я разрабатываю расширение Chrome в ES6. Ваши вопросы, кажется, более общие, поэтому я пытаюсь ответить на этот вопрос, основываясь на моих опытах.

В следующей таблице совместимости, Chrome 41 показывает, что это в настоящее время имеет совместимость 41%. Пара ключевых функций, таких как class, не входит в это 41%, и поэтому мне было любопытно, были ли другие варианты, такие как трансляция.

Это верно. Вы можете легко использовать все существующие функции ES6 без забот и перекосов. В каждом новом выпуске Chrome есть еще несколько функций, что очень интересно ждать;) Chrome 44 теперь охватывает 48%, включая class.

Однако, если вы хотите пойти полным ES6, то компилятор по-прежнему остается лучшим вариантом. Вам не нужно беспокоиться о поддерживаемых функциях и просто писать код ES6, который будет скомпилирован с соответствующим кодом ES5.

Моя текущая настройка Browserify (через grunt-browserify) с помощью Babelify в качестве компилятора. Browserify позволяет вам также использовать модули ES6, которые дают вам полную мощность ES6.

Gruntfile.js

browserify: {
    dist: {
        options: {
            transform: [
                ['babelify', { loose: 'all' }]
            ],
            browserifyOptions: { debug: true },
            exclude: ''
        },
        files: {
            'path/to/es5/app.js': ['path/to/es6/**/*.js']
        }
    }
}
// Then it will be uglified and copied to dist.

Это означает, что мой Extension все еще работает с кодом ES5, хотя это не имеет большого значения для меня, поскольку я все еще могу писать в ES6.

Если вы действительно хотите использовать доступные функции ES6 (что я и делал раньше), это может быть довольно неприятным/раздражающим, так как вам всегда нужно искать то, что возможно в Chrome, и в основном он ждет новой версии Chrome.

Однако, я считаю, что процесс сборки немного отличается при разработке хром удлинение. Например, при тестировании расширения я я загружаю его в браузер через "Загружать распакованные расширение", которое указывает прямо на исходный код.

Ну, это не совсем так, как мне кажется. В зависимости от того, какие конкретные функции Chrome вы используете, вы можете либо просто разработать свой проект, либо затем протестировать его, загрузив его в браузер или просто связав путь "Загрузите распакованный расширитель" в созданную папку dist/build/public. Выполняя это, это всегда текущее состояние. Это работает для меня лучше всего.

Надеюсь, что это поможет немного:)