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

Question

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

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

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

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

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

Answer 1

Update Этот ответ был написан в 2015 году таблица ссылка совместимости показывает Chrome, FF, Грань, и Safari являются болеесовместимы, чем Вавилонская сих пор.

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

Оригинал

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

В следующем compatibility table, хром 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. 

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

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

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

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

Надежда, что помогает немного :)