语言►nodejs►库►webpack

webpack中的模块方法

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/06/22/webpack%E4%B8%AD%E7%9A%84%E6%A8%A1%E5%9D%97%E6%96%B9%E6%B3%95/

摘要

本文主要讲述了：

  1. ES6
  2. CommonJS

正文

webpack支持多种规格的模块方法。包括：ES6、CommonJS 和 AMD。

推荐使用 ES6 规格。

ES6

自webpack@2.0.0起，webpack已经原生支持 ES6 的模块方法。

这表示开发者能够直接使用import和export。

注意：使用其他的 ES6 语法还是需要 babel 支持。

import

示例：

1
2
import MyModule from './my-module.js';
import { NamedExport } from './other-module.js';

export

示例：

1
2
3
4
5
6
7
8
9
10
// Named exports
export var Count = 5;
export function Multiply(a, b) {
  return a * b;
}

// Default export
export default {
  // Some data...
};

import()

示例：

1
2
3
import('lodash').then(({ default: _ }) => {
  console.log(_.random(1, 10));
});

CommonJS

require()

require()用于同步读取模块。

示例：

1
2
var $ = require('jquery');
var myModule = require('my-module');

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/06/22/webpack%E4%B8%AD%E7%9A%84%E6%A8%A1%E5%9D%97%E6%96%B9%E6%B3%95/

本文对你有帮助？请支持我

支付宝
微信