Javascript 从巴别塔6到巴别塔7的项目迁移->；导入/导出不在顶层时出错

几天后，我找到了一个与mongo、vuejs、express和passport一起工作的项目。

这个项目最初是为巴别塔6编写的

为了使用Babel 7，我更新了package.json中的依赖项：

  "devDependencies": {
    "@babel/core": "^7.7.5",
    "@babel/plugin-syntax-dynamic-import": "^7.7.4",
    "@babel/plugin-transform-modules-commonjs": "^7.7.5",
    "@babel/plugin-transform-runtime": "^7.7.6",
    "@babel/plugin-transform-strict-mode": "^7.7.4",
    "@babel/preset-env": "^7.7.6",
    "@babel/preset-react": "^7.7.4",
    "@babel/runtime": "^7.7.6",
    "babelify": "^10.0.0",
    "browserify": "^16.5.0",
    "browserify-hmr": "^0.4.1",
    "concurrently": "^5.0.1",
    "eslint": "^6.7.2",
    "eslint-config-airbnb-base": "^14.0.0",
    "eslint-plugin-html": "^6.0.0",
    "eslint-plugin-import": "^2.19.1",
    "nodemon": "^2.0.2",
    "vue-hot-reload-api": "^2.3.4",
    "vueify": "^9.2.4",
    "watchify": "^3.11.1"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "body-parser": "^1.19.0",
    "connect-mongo": "^3.2.0",
    "express": "^4.17.1",
    "express-session": "^1.17.0",
    "flash": "^1.1.0",
    "node-uuid": "^1.4.8",
    "passport": "^0.4.1",
    "passport-local": "^1.0.0",
    "pug": "^2.0.4",
    "vue": "^2.6.10"
  }

.LRC：

{
  "presets": [
    ["@babel/preset-env", {
        "targets": {
          "ie": "11"
        }
      }]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

当我键入“npm运行开发”时，我有一个错误：

错误：正在分析文件
从“axios”导入axios
^D:\xxx\src\explorations\u viewer.vue:“导入”和 “导出”只能出现在顶层（31:0）

在vue代码下面：

<style>
  .exclamations-viewer,
  .add-form-container {
    margin-top: 20px;
  }
</style>

<template>
  <div class="container">
    <div class="row add-form-container" v-if='canAdd()'>
      <div class="col-md-12">
        <Exclamation-Add-Form :onAdd='onExclamationAdded'></Exclamation-Add-Form>
      </div>
    </div>
    <div class="row exclamations-viewer">
      <div class="col-md-4">
        <Exclamation-List :user='user' :onRemove='onExclamationRemoved' title='All Exclamations' :exclamations='exclamations'></Exclamation-List>
      </div>
      <div class="col-md-4">
        <Exclamation-List :user='user' :onRemove='onExclamationRemoved' title='Your Exclamations' :exclamations='userExclamations'></Exclamation-List>
      </div>
      <div class="col-md-4">
        <Exclamation-Search-List :user='user' :onRemove='onExclamationRemoved' :exclamations='exclamations'></Exclamation-Search-List>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';  
  import ExclamationList from './exclamation_list.vue';
  import ExclamationSearchList from './exclamation_search_list.vue';
  import ExclamationAddForm from './exclamation_add_form.vue';

  export default {
    name: 'ExclamationsViewer',
    data: () => ({
      user: {
        scopes: [],
      },
      exclamations: [],
    }),
    beforeMount() {
      Promise.all([
        axios.get('/api/me'),
        axios.get('/api/exclamations'),
      ]).then(([{ data: meData }, { data: exclamationData }]) => {
        this.user = meData.user;
        this.exclamations = exclamationData.exclamations;
      });
    },
    methods: {
      onExclamationAdded(text) {
        axios.post('/api/exclamations', { text }).then(({ data }) => {
          this.exclamations = [data.exclamation].concat(this.exclamations);
        });
      },
      canAdd() {
        return this.user.scopes.includes('add');
      },
      onExclamationRemoved(id) {
        axios.delete(`/api/exclamations/${id}`)
          .then(() => {
            this.exclamations = this.exclamations.filter(e => e.id !== id);
          });
      },
    },
    computed: {
      userExclamations() {
        return this.exclamations.filter(exc => exc.user === this.user.username);
      },
    },
    components: {
      ExclamationList,
      ExclamationSearchList,
      ExclamationAddForm,
    },
  };
</script>

.感叹号观众，
.添加表单容器{
边缘顶部：20px；
}
从“axios”导入axios；
从“./感叹号列表.vue”导入感叹号列表；
从“./感叹号搜索列表.vue”导入感叹号搜索列表；
从“.”导入感叹号addForm/感叹号\u add\u form.vue'；
导出默认值{
名称：“感叹器查看器”，
数据：（）=>({
用户：{
范围：[]，
},
感叹号：[]，
}),
beforeMount（）{
我保证([
get（'/api/me'），
get（'/api/惊叹号'），
]).then（（[{data:meData}，{data:惊呼数据}]）=>{
this.user=meData.user；
this.explormations=explormationdata.explormations；
});
},
方法：{
onExclamationAdded（文本）{
post（'/api/惊叹号'，{text}）。然后（{data}）=>{
this.explormations=[data.exploration].concat（this.explormations）；
});
},
卡纳德（）{
返回this.user.scopes.includes（'add'）；
},
onExclamationRemoved（id）{
delete（`/api/exportmations/${id}`）
.然后（（）=>{
this.exportmations=this.exportmations.filter（e=>e.id！==id）；
});
},
},
计算：{
用户感叹词（）{
返回this.exportmations.filter（exc=>exc.user===this.user.username）；
},
},
组成部分：{
感叹者，
感叹词搜索列表，
感叹式，
},
};

我认为这与旧的预设es2015有关，但花了一天时间后，我已经没有选择了。 谢谢您的帮助。

检查此项：检查此项：