作者回复: 这是因为 webpack4 在 mode 设置成 production 后会默认使用了terser-webpack-plugin插件,这个插件可以支持 ES6 语法的 uglify。
这个是压缩插件的切换历史:https://github.com/webpack/webpack/commit/311a7285d36b38bada46102967c431e93ff48a89
Some history:
* `uglifyjs-webpack-plugin` < v1.0 used the minifier `uglify-js`
* however `uglify-js` does not support ES6, which resulted in a fork
called `uglify-es` that was developed in the `uglify-js` repository,
but under the `harmony` branch
* `uglifyjs-webpack-plugin` v1.x switched to `uglify-es` for ES6 support
* however `uglify-es` stopped being maintained:
mishoo/UglifyJS2#3156 (comment)
* which led to a fork called `terser` that has incorporated all of
the unmerged PRs and will be where all new development occurs:
https://github.com/fabiosantoscode/terser
* `terser-webpack-plugin` was created, which is the `terser` equivalent
of `uglifyjs-webpack-plugin`:
https://github.com/webpack-contrib/terser-webpack-plugin
* `uglifyjs-webpack-plugin` v2.x will be switching back to `uglify-js`,
so any project that needs to support ES6 now needs to switch to
`terser-webpack-plugin`.
Fixes #7923.
作者回复: 嗯,这个是为了演示哈。对于 react和 react-dom 应该是:
npm i react react-dom -S
对于构建相关配置应该:
npm i @babel/preset-react -D
package.json中dependencies和devDependencies的区别是:devDependencies用于本地环境开发时候,dependencies用户发布环境,也就是开发阶段的依赖最后是不对被打入包内。
通常框架、组件和 utils 等业务逻辑相关的包依赖放在dependencies里面,对于构建、ESlint、单元测试等相关依赖放在devDependencies中
作者回复: import ReactDom from 'react';
这一行需要改成:
import ReactDom from 'react-dom';
作者回复: 主要是这个 .babelrc 比较简单,其实就包含两块内容,一个是 babel presets,另一个是 babel plugins数组。比如 .babelrc 文件:
{
"presets": [
"@babel/preset-env”
],
"plugins": [
"@babel/proposal-class-properties"
]
}
plugin 用来支持某个功能,presets 是多个 plugin 的集合。就是这么简单
作者回复: 这个应该不会,看代码链接访问是403,可以重新提供一个链接吗?我帮你看看。
作者回复: 哦哦,好嘞,强👍
作者回复: 这个之前不少同学都遇到过,需要先检查下项目跟目录下是否有 .babelrc 文件(注意是否拼写错误),然后.babelrc 文件的内容是否正确。
另外可以和课件的源码对照比较一下
作者回复: 嗯嗯,这个当时录制的时候也注意到啦,后面有修改的哈