模块
10.1 经常使用官方的模块(import
/export
)而不是非标准的模块系统。你可以为你自己喜欢的模块系统编译
为什么?模块化是未来,让我们拥抱未来
// 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 不要使用通配符引入
为什么? 这样能确保你有一个default export
// bad
import * as AirbnbStyleGuide from './AirbnbStyleGuide';
// good
import AirbnbStyleGuide from './AirbnbStyleGuide';
10.3 不要直接从import里export
为什么?虽然写在一行会比较简洁,但让代码单一职责能够保持更好的一致性
// bad
// filename es6.js
export { es6 as default } from './AirbnbStyleGuide';
// good
// filename es6.js
import { es6 } from './AirbnbStyleGuide';
export default es6;
10.4 一个相同的路径,只引用一次
eslint: no-duplicate-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 不要export可变的量
eslint: import/no-mutable-exports
为什么?在导出值的时候,可变量应该通常要被禁止。虽然某些特殊的场景可能用的到,但是通常导出的应该是一个常量
// bad
let foo = 3;
export { foo };
// good
const foo = 3;
export { foo };
10.6 如果只导出一个值,使用default export会比使用命名导出更好
eslint: import/prefer-default-export
为什么?来推动更多的文件只输出一个值,这样能有更好的可读性和可维护性
// bad
export function foo() {}
// good
export default function foo() {}
10.7 把所有import语句放在最前面
eslint: import/first
为什么?因为
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 多行export应该像多行数组和对象一样缩进
为什么?大括号遵循与指南中的每个其他大括号相同的缩进规则,句尾的逗号也一样
// bad
import {longNameA, longNameB, longNameC, longNameD, longNameE} from 'path';
// good
import {
longNameA,
longNameB,
longNameC,
longNameD,
longNameE,
} from 'path';
10.9 在模块引入的语句里不要使用Webpack loader的语法
eslint: import/no-webpack-loader-syntax
为什么?因为使用Webpack语法会把代码耦合进模块打包器中。最好在
webpack.config.js
里去用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';