之前课程中老师用的babel的版本比较低,我在学习时安装的babel版本较高,因此每当使用class语法或decorator修饰器时都会出现一些报错的情况!

ERROR in ./src/index.js 4:1

Module parse failed: Unexpected character '@' (4:1)

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

| class Store {

> @observable array = [];

| @observable obj = {};

| @observable map = new Map();

在网上搜索了各种资料后,尝试修正了package.json和webpack.config.js文件的写法

//package.json
{
"name": "mobx-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack -w",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.7.7",
"@babel/plugin-proposal-class-properties": "^7.7.4",
"@babel/plugin-proposal-decorators": "^7.7.4",
"@babel/preset-env": "^7.7.7",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"webpack": "^4.41.3",
"webpack-cli": "^3.3.10"
},
"dependencies": {
"mobx": "^5.15.1"
}
} 
//webpack.config.js
const path = require('path'); module.exports = {
mode:'development',
entry:path.resolve(__dirname,'src/index.js'),
output:{
path:path.resolve(__dirname,'dist'),
filename:'main.js'
},
module: {
rules:[{
test: /\.js$/,
exclude: /node_modules/,
use:{
loader:'babel-loader',
options: {
"presets": [
[
"@babel/preset-env",
{"useBuiltIns":"entry"}
]
],
"plugins": [
["@babel/plugin-proposal-decorators", {"legacy": true}],
["@babel/plugin-proposal-class-properties", {"loose": true}]
]
}
}
}]
},
devtool:'inline-source-map'
} 

不再提示上面的错误,报了另一个错误:

ERROR in ./src/index.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):

Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel.

按照错误提示信息,重新安装了低版本babel-core,在命令行中执行:

npm install babel-core@^7.0.0-bridge.0 @babel/core -D

安装好后,重新执行npm start启动项目,就不再报错了~

但是仍然有一个警告⚠️:

WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

npm install --save core-js@2    npm install --save core-js@3

yarn add core-js@2              yarn add core-js@3

在以后项目中遇到问题时需要解决,在学习阶段暂时忽略一阵子。。。

mobx中使用class语法或decorator修饰器时报错的更多相关文章

  1. mobx学习笔记03——mobx基础语法(decorator修饰器)

    在声明阶段实现类与类成员注解的一种语法. function log(target){ const desc = Object.getOwnPropertyDescriotors(target.prot ...

  2. js基石之---es7的decorator修饰器

    es7的decorator修饰器 装饰器(Decorator)是一种与类(class)相关的语法,用来注释或修改类和类方法. decorator就是给类添加或修改类的变量与方法的. 装饰器是一种函数, ...

  3. 19.Decorator修饰器

    Decorator 修饰器 类的修饰 许多面向对象的语言都有修饰器(Decorator)函数,用来修改类的行为.目前,有一个提案将这项功能,引入了 ECMAScript. @testable clas ...

  4. ES6(Decorator(修饰器))

    Decorator(修饰器) 1.基本概念 函数用来修改 类 的行为 1.Decorator 是一个函数 2.通过Decorator(修饰器)能修改 类 的行为(扩展 类 的功能)3.Decorato ...

  5. es6 Decorator修饰器

    1.类的修饰: 修饰器(Decorator)函数,用来修改类的行为.修饰器是一个对类进行处理的函数.修饰器函数的第一个参数,就是所要修饰的目标类. @testable class MyTestable ...

  6. python decorator 修饰器

    decorator 就是给函数加一层皮,好用! 1 from time import ctime 2 3 def deco(func): 4 def wrappedFunc(*args, **kwar ...

  7. ES6 Decorator 修饰器

    目的:  修改类的一种方法,修饰器是一个函数 编译: 安装 babel-plugin-transform-decortators-legacy .babelrd      plugins: [&quo ...

  8. 21.Decorator修饰器

    1.类的修饰 2.方法的修饰 3.为什么修饰器不能用于函数? 4.core-decorators.js 5.使用修饰器实现自动发布事件 6.Mixin 7.Trait 8.Babel转码器的支持

  9. eclipse中对Hadoop项目进行mvn clean install时报错的处理

    [ERROR] Failed to execute goal org.apache.maven.plugins:maven-clean-plugin:2.5:clean (default-clean) ...

随机推荐

  1. PHP rewinddir() 函数

    打开一个目录,列出其中的文件,充值目录句柄,重新列出其中的文件,然后关闭: <?php$dir = "/images/"; // Open a directory, and ...

  2. 07-图5 Saving James Bond - Hard Version(30 分)

    This time let us consider the situation in the movie "Live and Let Die" in which James Bon ...

  3. element-ul 处理 组件内的弹出框close问题

    <el-dialog custom-class="rental-pop" :close-on-click-modal="false" :append-to ...

  4. python selenium模拟登陆163邮箱。

    selenium是可以模拟浏览器操作. 有些爬虫是异步加载的,通过爬取网页源码是得不到需要的内容.所以可以模拟浏览器去登陆该网站进行爬取操作. 需要安装selenium通过pip install xx ...

  5. angular5 清除定时器

    ngOnDestroy 在指令被销毁前,将会调用 ngOnDestory 方法.它主要用于执行一些清理操作,比如:移除事件监听.清除定时器.退订 Observable 等. 调用方法 1. impor ...

  6. SQL Server2012创建连接服务器到ORACLE11G

    做ETL,肯定少不了经常会从不同的数据库直接进行数据的操作,为了更好的进行跨库操作,SQL SERVER 2012拥有LinkedServer功能.前段时间写了个SQL SERVER同种数据库直接的链 ...

  7. Eclipes更改字体颜色

    有图有真像 更改字体大小

  8. ZJUT11 多校赛补题记录

    牛客第一场 (通过)Integration (https://ac.nowcoder.com/acm/contest/881/B) (未补)Euclidean Distance (https://ac ...

  9. QT的一些小知识

    记录一下前段时间工作中用到的东西,包括开发工具和一些简单的技巧吧.也许对于大家来说耳熟能详了. 最开始学习QT记得是在Ubuntu12.04下用apt命令行的方式安装了QT4.8.4以及QT Crea ...

  10. ABTest介绍及abtest流量切换实现

    本文为学习abtest切流方案方便以后查看大部分内容转载自原文 https://blog.csdn.net/tanweii163/article/details/80543083 互联网公司的业务发展 ...