Ужасный import кракен — как использовать ES6-модули и не сойти с ума03.05.2017 17:48

Комментарии (13)

• svekl

  3 мая 2017 в 11:29

  +1

  ↑

  ↓

  А tree shaking разве нормально отработаботает, если Вы импортируете всё подряд?

  • justboris

    3 мая 2017 в 11:59

    +1

    ↑

    ↓

    Нормально отработает

    • svekl

      3 мая 2017 в 12:04

      0

      ↑

      ↓

      Здорово, спасибо

    • svekl

      3 мая 2017 в 12:11

      0

      ↑

      ↓

      Работает даже такое

      import { Math } from './exports.js';
      console.log( Math['square']( 5 ) );
      

      • justboris

        3 мая 2017 в 12:44

        0

        ↑

        ↓

        import { Math } from './exports.js';
        
        const prop = 'square';
        console.log( Math[prop]( 5 ) ); // 125

        
        

        А такое — уже нет.

        
        

        В общем, надурить Rollup можно, если постараться. Но основные варианты использования он поддерживает

• justboris

  3 мая 2017 в 11:51

  +3

  ↑

  ↓

  Все хорошо, но конвенция именования файла @Exports очень странная.

  
  

  Node.js и все бандлеры поддерживают index.js файл. Когда вы укажете в импорте путь до папки, например ../Common/Utils/, то бандлер автоматически добавить index.js или index.ts в конец, если такой файл в папке имеется.

  
  

  И второй момент, вот такой код

  
  

  import * as Common from "../Common/@CommonExports";
  
  export { Common };

  
  

  Ломает вам весь tree-shaking. Теперь все содержимое Common будет включено в бандл, неважно, используется ли оно на самом деле или нет

• justboris

  3 мая 2017 в 11:59

  +2

  ↑

  ↓

  Проверил еще раз, tree-shaking все еще работает. Пример в Rollup-repl. Второй вопрос снимается, извините.

  
  

  А первый вопрос про неиспользование index.js все еще остается.

• dzigoro

  3 мая 2017 в 13:25

  +2

  ↑

  ↓

  На что только не идут люди, чтобы не пользоваться нормальными средствами разработки. Я конечно сейчас накину на вентилятор, но ни одна религия не запрещает использовать WebStorm, в котором импорт, рефакторинг и навигация уже работает. Я вообще в импорты не смотрю, они зафолжены всегда.

  • Anarions

    3 мая 2017 в 15:36 (комментарий был изменён)

    0

    ↑

    ↓

    А вебшторм умеет автоматически импортировать (как решарпер по Alt+Enter) из вариантов имеющихся в проекте? Например я начинаю печатать —, а вебшторм зная что у меня имеются /path1/MyComponent и /path2/MyComponent / — предлагает мне заимпортить один из двух?

    • dzigoro

      3 мая 2017 в 16:55

      0

      ↑

      ↓

      Да, это зарелизили месяц назад буквально.

      • thekip

        3 мая 2017 в 17:29

        0

        ↑

        ↓

        Не знаю что конкретно нового они недавно зарелизили, но я еще в прошлом году мог выбирать по Alt Enter нужный символ, и добавлялся импорт именно выбранного символа.

        
        

        А так да, импорты хоть 5, хоть 10 точек, неважно. Все автоматом делается средой. Не могу представить тот гемор если бы делал бы это сам (и тот гемор на который люди себя толкают выбирая другие инструменты разработки).

• Drag13

  3 мая 2017 в 13:44

  0

  ↑

  ↓

  Уже пару месяцев юзаю такую штуку, полет впринципе нормальный. Единственный недостаток с которым столкнулся, если мы меняем положение index файла с молдулями, то это затрагивает всех пользователей этого файла и плодит много изменений. Но большим недостатком это не назовешь.

• bromzh

  3 мая 2017 в 16:04

  0

  ↑

  ↓

  А я просто настроил paths и baseUrl в конфиге тайпскрипта, импорты выглядят так:

  
  

  // PROJECT_ROOT/src/app/foo/foo.ts
  export class Foo {}
  
  // PROJECT_ROOT/src/app/fo/index.ts
  export * from './foo.ts';
  
  // PROJECT_ROOT/src/app/bar/bar.ts
  import { Foo } from 'app/foo';
  

  
  

  Вебшторм же можно настроить на импорт в таком стиле, без вездесущих ../../

  
  

  картинка

  

© Habrahabr.ru