模块

• 10.1 用(import/export) 模块而不是无标准的模块系统。你可以随时转到你喜欢的模块系统。

  Why? 模块化是未来，让我们现在就开启未来吧。

  // bad
  const AirbnbStyleGuide = require('./AirbnbStyleGuide');
  module.exports = AirbnbStyleGuide.es6;
  
  // ok
  import AirbnbStyleGuide from './AirbnbStyleGuide';
  export default AirbnbStyleGuide.es6;
  
  // best
  import { es6 } from './AirbnbStyleGuide';
  export default es6;
  

• 10.2 不要用import通配符， 就是 * 这种方式

  Why? 这确保你有单个默认的导出

  // bad
  import * as AirbnbStyleGuide from './AirbnbStyleGuide';
  
  // good
  import AirbnbStyleGuide from './AirbnbStyleGuide';
  

• 10.3 不要直接从import中直接export

  Why? 虽然一行是简洁的，有一个明确的方式进口和一个明确的出口方式来保证一致性。

  // bad
  // filename es6.js
  export { es6 as default } from './AirbnbStyleGuide';
  
  // good
  // filename es6.js
  import { es6 } from './AirbnbStyleGuide';
  export default es6;
  

• 10.4 一个路径只 import 一次。 eslint: no-duplicate-imports (opens new window)

  Why? 从同一个路径下import多行会使代码难以维护

  // bad
  import foo from 'foo';
  // … some other imports … //
  import { named1, named2 } from 'foo';
  
  // good
  import foo, { named1, named2 } from 'foo';
  
  // good
  import foo, {
    named1,
    named2,
  } from 'foo';
  

• 10.5 不要输出可变的变量 eslint: import/no-mutable-exports (opens new window)

  Why? 变化通常都是需要避免，特别是当你要输出可变的绑定。虽然在某些场景下可能需要这种技术，但总的来说应该导出常量。

  // bad
  let foo = 3;
  export { foo }
  
  // good
  const foo = 3;
  export { foo }
  

• 10.6 在一个单一导出模块里，用 export default 更好。 eslint: import/prefer-default-export (opens new window)

  Why? 鼓励使用更多文件，每个文件只做一件事情并导出，这样可读性和可维护性更好。

  // bad
  export function foo() {}
  
  // good
  export default function foo() {}
  

• 10.7 import 放在其他所有语句之前。 eslint: import/first (opens new window)

  Why? 让import放在最前面防止意外行为。

  // bad
  import foo from 'foo';
  foo.init();
  
  import bar from 'bar';
  
  // good
  import foo from 'foo';
  import bar from 'bar';
  
  foo.init();
  

• 10.8 当 import 引入的变量过多，一行放不下，这时要像多行数组一样进行换行。

  Why? 花括号与样式指南中每个其他花括号块遵循相同的缩进规则，逗号也是。

  // good
  import {
    longNameA,
    longNameB,
    longNameC,
    longNameD,
    longNameE,
  } from 'path';
  

• 10.9 在import语句里不允许Webpack loader语法 eslint: import/no-webpack-loader-syntax (opens new window)

  Why? 一旦用Webpack语法在import里会把代码耦合到模块绑定器。最好是在webpack.config.js里写webpack loader语法

  // bad
  import fooSass from 'css!sass!foo.scss';
  import barCss from 'style!css!bar.css';
  
  // good
  import fooSass from 'foo.scss';
  import barCss from 'bar.css';
  

回到顶部