在webpack中使用es6新特性class中遇到的问题

最新推荐文章于 2022-02-25 19:15:04 发布
最新推荐文章于 2022-02-25 19:15:04 发布
阅读量1.3k 收藏
点赞数
分类专栏： bug笔记 文章标签： babel
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45865724/article/details/104327445
版权
报错：
 Support for the experimental syntax 'classProperties' isn't currently enabled
出错的代码
class myClass{
   
> 6 |     static info = "这是myClass的静态属性"
    |                 ^
  7 | 
  8 | }
原因

因为webpack不能完全识别es6的一些新语法
所以要在babel中配置能够识别新语法的插件

解决方法
 cnpm i '@babel/plugin-propos
最低0.47元/天 解锁文章
程序员徐小白
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Webpack无法编译ES6文件的原因分析
qq_44884577的博客
04-16 727
Webpack无法编译ES6文件的原因分析
flux-react-es6-webpack:使用 ES6 的 Flux 和 React
06-23
在本文中，我们将深入探讨如何使用 ES6 语法与 Flux 架构以及 React 框架结合，构建一个现代的前端应用。Flux 是 Facebook 推出的一种数据流管理架构，而 React 是一个用于构建用户界面的 JavaScript 库，特别适合...
详解如何用babel转换es6的class语法
12-12
babel是一个转码器，目前开发react、vue项目都要使用到它。它可以把es6+的语法转换为es5，也可以转换JSX等语法。 我们在项目中都是通过配置插件和预设(多个插件的集合)来转换特定代码，例如env、stage-0等。 实际上babel可以通过自定义插件的方式实现任何代码的转换，接下来我们通过一个“把es6的 class 转换为es5”的例子来了解一下babel。 内容如下： webpack环境配置 大家应该都配置过babel-core这个loader，它的作用是提供babel的核心Api,实际上我们的代码转换都是通过插件来实现的。 接下来我们不用第三方的插件，自己实现一个es6类转
webpack-cli报错: Class constructor ServeCommand cannot be invoked without ‘new‘....
人生不易，搬砖艰难
06-18 4858
重新安装webpack-cli就好了
webpack 打包压缩 ES6文件报错UglifyJs + Unexpected tok
hzxOnlineOk的博客
01-02 1709
最近在下载别人的vue多页面demo后，npm run dev没问题，npm run build之后就报错： 1、webpack 打包压缩 ES6文件报错UglifyJs + Unexpected token... 最近做项目的时候运用vue,webpack,在打包压缩的工程中，部分压缩文件报错，虽然也可以运行，但是毕竟报错不好看； 于是，如下解决方法： 在根目录下创建.babelrc文件...
1分钟学会配置webpacke es6转换、解析class、解析装饰器
Kevinmanman的博客
02-22 725
第一步： yarn add babel-loader @babel/core @babel/preset-env -D yarn add @babel/plugin-proposal-class-properties -D yarn add @babel/plugin-proposal-decorators -D 第二步： 配置webpack module: { rules:...
webpack踩坑 babel-loader解析不出来es6(...)扩展符
JJ66666666的博客
09-02 2907
最近做webpack相关的学习，踩了不少坑，想开始在自己的博客里记录一些平时学习踩的坑。 今天碰到的webpack里用babel-loader解析es6，结果发现在 ...扩展符的时候疯狂报错。 通过百度等一系列操作发现需要一个插件 只需要在安装个plugin .https://babeljs.io/docs/en/babel-plugin-proposal...
ng-webpack-es6:使用webpack的Angular-ES6
05-06
而ES6（ECMAScript 2015）是JavaScript的下一代版本，引入了许多新特性，如类、箭头函数、模板字符串等，使代码更加简洁、易读。 使用ES6编写Angular应用的优点包括： 1. **模块化**：ES6的import/export语法使得...
详解webpack+es6+angular1.x项目构建
08-30
`ES6`（又称`ES2015`）作为JavaScript的最新版本，引入了许多新特性，如箭头函数、类、模块导入导出等，极大地提升了开发效率。而`Angular 1.x`，尽管是较早的版本，但因其强大的功能和广泛的应用，仍然是许多项目的...
webpack-ioc-es6:用于 webpack 的 ES6 依赖注入器
07-02
- 示例项目：提供一个简单的应用示例，演示如何在 Webpack 配置中使用该框架，并展示其基本用法。 - 文档：解释框架的安装、配置和使用方法，帮助开发者快速上手。 - 测试用例：包含对框架功能的测试代码，验证框架...
es6-loader:用于 webpack 的 ES6 模块加载器
06-25
已弃用：请使用更新的转译器，例如 。es6-loader 为转译 ES6 语法。... 或者在 webpack 配置中： module: { loaders : [ { test : / \. js $ / , loader : 'es6-loader' } ]} 然后正常导入： import bamboo fro
webpack与es6
caochenyu的博客
12-23 846
首先，建立目录文件，这里为了介绍方便，建立一个简单的如下的目录 /web根目录 -es6 main.js Person.js index.html webpack.config.js 然后，全局安装webpack npm install webpack -g 在当前目录下安装插件 npm install webpack --sava-dev npm install
基于webpack使用ES6新特性(转载)
anang1264的博客
05-30 160
本文转载自: http://www.tuicool.com/articles/vye2ea6 转载于:https://www.cnblogs.com/ToNi/p/5542369.html
ES6中的类(Class)的写法
xuxu_qkz的博客
11-23 6699
1.传统ES5中的class用法//ES5的对应写法 (function(){ //定义类、构造函数 function User(name,age){ this.name=name; this.age=age; } //定义原型
webpack打包时不会解析
weixin_52406641的博客
04-15 137
今天在写vue项目时发现webpack打包时不会解析 -webkit-box-orient 这个属性，解决方法如下。 /*! autoprefixer: off / -webkit-box-orient: vertical; / autoprefixer: on */
webpack+babel打包出的class是怎么个实现
u011393161的博客
02-13 1236
某天突然想看看ES6的class是怎么个实现法，就随便写了个简单的例子试了试，先看例子 // add.js export default class Add { add(a, b) { return a + b; } minus(a, b) { return a - b; } static hah() { console.log("hah"); ...
webpack4 报错 Could not find plugin “proposal-class-static-block“. Ensure there is an entry in...
你是我修复不了的bug，但我会用一生去维护
12-02 2221
webpack4 报错 Could not find plugin “proposal-class-static-block“. Ensure there is an entry in ./available-plugins 使用babel-loader做js兼容性处理时，我们安装完babel-loader后还需要安装@babel/core 和@babel/preset-env 但是在安装完毕后，运行webpack 命令，进行打包时，控制台报 “Could not find plugin “propo
在类中设置static 静态属性报错，babel编译不出来。
qq_40072045的博客
04-15 1800
在做react中的context上下文例子中，用到的 static contextType = ThemeContext 报错。提示Support for the experimental syntax urrently enabled 当我们使用了一些JavaScript的一些新特性的时候，但是有没有在webpack.config.js里面或者是.babelrc文件中配置相关插件，就可以解决了。...
webpack配置阻止静态资源被解析为base64
weixin_48003149的博客
02-25 1223
webpack配置阻止某些特殊的静态资源被解析为base64
webpack中配置babel
最新发布
08-26
在webpack中配置babel需要以下步骤： 1. 首先，需要安装相应的依赖包。可以通过运行以下命令来安装babel相关的包： ``` npm install @babel/core @babel/preset-env babel-loader --save-dev ``` 2. 接下来，在webpack配置文件中进行相关配置。你可以在webpack.config.js中添加一个module.rules的规则，用于处理js和jsx文件。配置如下所示： ```javascript module.exports = { // ... module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] } // ... } ``` 这样配置之后，webpack会使用babel-loader来处理js和jsx文件，并且使用@babel/preset-env配置来转译es6+的语法为浏览器可识别的代码。 3. 最后，你可能还需要在项目根目录下添加一个.babelrc文件，用于配置babel的详细选项。例如可以在.babelrc中添加以下配置： ```json { "presets": ["@babel/preset-env"] } ``` 这样，你就可以使用babel来转译你的代码了。同样的配置方法也适用于其他需要babel转译的文件类型，只需要在module.rules中添加相应的规则即可。 注意，以上是一个简单的babel配置示例，具体的配置还取决于你的项目需求和babel插件的使用情况。你可以根据自己的需求进行相应的调整和扩展。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [webpack及babel配置](https://blog.csdn.net/qq_39111074/article/details/121371923)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员徐小白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值