babel

随着项目的增大，项目运行速度会越来越慢，导致影响开发进度。需要提升开发时代码的运行速度。 1. ScopeHoisting作用域提升 该插件在production模式下默认开启。development下需要手动启动。 1 .使用条件 和TreeShaking一样，必须使用ES6的模块，使用import/export语法。 2. 优点： 1）节省内存开销。因为默认每个bundle会打成闭包。 2）减少体积，提升速度。因为如果不使用es模块，默认会包裹一层require。 3. 用法 1. 首先阻止babel将es6的模块进行转换 { test: /\.jsx?$/, use: { loader: 'babel-loader', options: { // 切记modules: false presets: [['@babel/preset-env', {modules: false}], '@babel/preset-react'], plugins: [ ['@babel/plugin-proposal-decorators', {legacy: true}], ['@babel/plugin-proposal-class-properties', {loose: true}] ] }, }, exclude: /node_modules/ } 2. 引入的第三方库尽量使用es版本

今天想深入学习搭建前端项目的时候，遇到了一个关于 webpack配置的问题，而且我对webpack配置了解的很少。我用react脚手架搭建了一个react项目，项目其中有两个目录，分别是public目录和src目录，当我把组件写在public目录的时候，npm start的时候死活报错，同样的文件放在src目录下竟然不报错！报错以及报错信息如下：Module parse failed: /mnt/d/projects/my-react-app/public/components/Test1.js Unexpected token (6:6)You may need an appropriate loader to handle this file type.。刚开始还以为是代码或者文件扩展名的错误，后面查了一下资料也没找到答案，然后再看到一些文章写关于配置babel编译目录的文章以及报错信息给了我启示。 解决方法：在webpack配置文件这里配置babel会编译的目录即可 来源： CSDN 作者： TheZing 链接： https://blog.csdn.net/jingoat/article/details/103464182

①Plugin/Preset files are not allowed to export objects, only functions. 这个问题如百度到的，由于版本冲突问题，需要将babel的相关版本都换成7.0版本或6.0版本。 可以查看： https://www.cnblogs.com/jiebba/p/9618930.html ②Cannot find module 'babel-preset-env' 改了上面一个问题之后，出现这个错。这是配置的时候的问题：将web.config.js中的env改为 @babel/preset-env 我看百度上有说：在.babelrc文件或在webpack.config.js文件中，将原来的 env 替换为 @babel/preset-env。我没有修改 .babelrc文件。我的.babelrc文件是如下 来源： CSDN 作者： lhl891111 链接： https://blog.csdn.net/u012149906/article/details/103462424

.babelrc 文件 { "plugins": [ "@babel/plugin-proposal-optional-chaining", "@babel/plugin-transform-runtime" ], "presets": [ ["@babel/preset-env", { "useBuiltIns": "usage", "corejs": 3, "targets": { // https://jamie.build/last-2-versions "browsers": ["> 0.25%", "not ie 11", "not op_mini all"] } }] ] } npm install @babel/plugin-proposal-optional-chaining --save-dev npm install @babel/plugin-transform-runtime --save-dev Can't resolve '@babel/runtime/helpers/classCallCheck' 错误 npm i @babel/runtime --save-dev 来源： CSDN 作者： 弓弧名家_玄真君 链接： https://blog.csdn.net/txl910514/article/details/103493325

Babel对 Generator 的支持 最近新搭了一个react项目，用的ES2015，但是在运行生成器函数（Generator Function）的时候出现了报错，报错内容如下： Uncaught TypeError: Cannot read property 'mark' of undefined 跟踪运行，查找报错位置： var _marked = /*#__PURE__*/regeneratorRuntime.mark(generator); 默认babel是不支持generator函数的，官方提示是需要Babel polyfill 或者 regenerator runtime 的支持 我这里直接使用Babel polyfill 安装babel-polyfill npm install --save-dev babel-polyfill 使用 通过webpack module.exports = { entry: { index: [ 'babel-polyfill' #增加 ,'react-hot-loader/patch' , 'webpack-dev-server/client?http://localhost:8080' , 'webpack/hot/only-dev-server' , path.resolve(APP_PATH, 'index.js')] },

1.11.预处理器文件处理 1.sass文件 sass这种css预处理器是以.scss结尾，需要用node-sass和sass-loader来处理 安装loader npm i node-sass sass-loader -D 增加相关配置： webapck.base.js module: { rules: [ { test: /\.css$/, use: ["style-loader", "css-loader"] }, { test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] } ] } 注意： 如果出现css文件中引入sass文件的情况，只用css-loader是不能解析的，必须加入sass-loader，并且需要在css-loader中声明，使用sass-loader才可以 举个例子： index.css 引入 a.css , a.css引入a.scss，这个时候需要增加配置才行 { test: /\.css$/, use: [ "style-loader", // 需要把原来的字符串换成对象的形式，然后给css-loader配置参数 { loader: "css-loader", options: { // 如果css文件引入其他文件(@import), 使用后面的1个loader来处理