Webpack树-摇树装置之间Webpack babel-装载机，TypeScript tsconfig目标，@babel/预设-env模块:假，package.json副作用:假？

Question

作为标题。这是更长的版本：

1. 我的目标是设置Webpack的摇树特性(用于ES6模块，或者ESM，如果您愿意的话)。

我的困惑就在这些吐露中: Webpack v5和babel-loader(可以从webpack.*.config.js调音)；Babel v7有预置@babel/preset-env(可以从babel.config.js调音)；TypeScript可以从tsconfig.json调音。详细信息如下：

- First, from `tsconfig.json`, I noticed that I don't understand whether the `"target": "es5"` should be changed to `"target": "es6"`, or whether this may not matter at all. This is my reasoning:

即使目标设置为"es6"，babel-loader也会(可能)根据我在package.json中设置的"browserslist"字段(很可能)进一步将其转换为"es5“。而对于webpack的摇树工作，我想我不应该把我的代码转换到"es5“太早。

但是，这个论点是基于这样一个事实，即babel-loader只读取"browserslist"，而不给tsconfig.json一个_。如果有什么问题，请纠正我。

- Second, let's talk about babel. Inside the `babel.config.js` there is an option `modules: false`, which is apparently needed to command Babel not to transpile the ESM import so that tree-shaking will work. So this provides more context for the first question above: If I set `modules: false`, then it should mean that the input of `babel-loader`, i.e. the `.js` from `.tsx` according to `tsconfig.json`, should not transpile ESM import too. Please correct me if anything is wrong.

- Finally, about `package.json` and `webpack.*.config.js`. The option `sideEffects: false` is required for tree-shaking to work. But it seems that the this option can be added from both `package.json`(then should be the form `"side-effects"`) and `webpack.*.config.js`'s `sideEffects` field for `babel-loader`. I actually haven't tested which will work. Any advice on choosing the two options here?

还有一个我只使用babel-loader的上下文，不使用ts-loader (实际上我不确定这是否正确)。这是基于another answer从这个论坛，这是唯一的方式，对我来说，当我解决另一个问题。如果这个问题需要ts-loader，请告诉我，再次感谢。

Answer 1

我的目标是设置摇树功能.

在webpack 5上，默认情况下，它已经在生产模式中启用了。但是，您确实需要保持ESM语法以使其正常工作。如果要在开发模式下启用它，请添加usedExports: true。

...可以从tsconfig.json.中调优的TypeScript

..。或者这可能根本不重要。

如果您不使用类似于ts-loader的东西，那么答案是(绝对的)是，因为babel不使用它来决定转换目标。

...这就意味着巴别-装载机的输入，即根据.js从.tsx到tsconfig.json的输入，也不应该导入ESM。

对，是这样。

...sideEffects: false选项是树摇动工作所必需的.

不正确。

...对这两种选择有什么建议吗？

选package.json一号。您可能在StackOverflow上阅读了太多的文章，其中有人使用了假想的语法。

...我只使用babel-loader，不使用ts-loader (实际上，我不确定是否正确，)

你可以的。这在你的情况下是合适的，因为你有tsserver在你的新神夫人，它已经为你做跨文件类型检查。但你还是应该找点时间试试。很多优化似乎都是由他们完成的。