treeshaking commonjs esmodule，

Question

这里不是很明白 ：
esmodule是用 import React from ‘react’的吧，
import * as React from ‘react’ 是commonjs的写法吧。
这两个和treeshaking是怎样的关系呢？
之前依稀记得rollup 是可以用treeshacking， webpack不行， 有什么原因吗？

（esModuleInterop”: true
这个选项允许我们使用commonjs的方式import默认文件。比如说，在没有开启这个选项时，我们需要这样写才能引用react:
import * as React from 'react’
但是当我们开启了这个选项以后，import方式就与普通的JavaScript没有区别了，可以写为:
import React from 'react’
这样处理项目引入会更自然。）

Answer 1

阿莱克斯刘 2021-01-14 14:46:00

hello 同学你好，关于commonjs的问题，关键点是模块加载的方式。比如，CommonJS是运行时加载，而es6是编译时加载；CommonJS是同步加载，而es6是异步加载等等。

不管是使用一下哪一个，最终的加载模式都可以是CommonJS，因为网站最后还是要被webpack来打包为es5的方式。

var ReactRouter = require('react-router')
import * as ReactRouter from 'react-router';

https://stackoverflow.com/questions/37050932/commonjs-imports-vs-es6-imports

比写法更重要的是要搞清楚背后的原理以及各种模块加载框架的优缺点，目前的比较流行的模块加载方法有CommonJS(nodeJS, browerify)，ES6(原生), AMD(requrieJS)，CMD(seajs，我没用过)。

treeshaking的可以消除无用的js代码以及依赖，但他背后的本质以及如何关联依赖我没研究过，理解也不深，就不误导你了。谢谢你的问题。

• 阿莱克斯刘 #1

  hello, 同学，我刚刚又看了一次你的问题，你的意思是说我写再课程的文档中写错了对吧，不好意思，刚刚才看明白。是我的笔误，谢谢你指正，我会立刻修改这个问题

• 阿莱克斯刘 #2

  刚刚已经更正了文档，可能要稍等一段时候才会更新出来。谢谢

• 提问者 慕侠9157770 #3

  非常感谢！