相关疑难解决方法(0)

我正在使用带有vuejs的webpack.Webpack做了它的事情,但是当我查看输出的app.js文件时,它给了我这个错误.

'import'和'export'可能只出现在顶层

我假设babel没有转换代码是个问题？因为我在查看应用程序时在浏览器中收到此信息.

意外的令牌导入

这是我的vuejs应用程序的entry.js:

/*jshint esversion: 6 */
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
require('./css/style.scss');

// Export the vue router
export var router = new VueRouter({
  hashbang: false,
  root: '/'
  // history: true
});

// Set up routing and match routes to components
router.map({
  '/': {
    component: require('./components/home/Home.vue')
  }
});

// Redirect to the home route if any routes are unmatched
router.redirect({
  '*': '/'
});

// Start the app on the #app …

请考虑以下两个文件:

app.js

import Game       from './game/game';
import React      from 'react';
import ReactDOM   from 'react-dom';

export default (absPath) => {
  let gameElement = document.getElementById("container");

  if (gameElement !== null) {
      ReactDOM.render(
          <Game mainPath={absPath} />,
          gameElement
      );
  }
}

index.js

import App from './src/app';

该 gulpfile.js

var gulp        = require('gulp');
var source      = require('vinyl-source-stream');
var browserify  = require('browserify');
var babelify    = require("babelify");
var watch       = require('gulp-watch');

gulp.task('make:game', function(){
  return browserify({
    entries: [
      'index.js'
    ]
  })
  .transform('babelify')
  .bundle()
  .pipe(source('index.js'))
  .pipe(gulp.dest('app/'));
});

错误:

gulp make:game …

我在上一个项目中开始使用es2015和babel.当我尝试做import或export在if条件内时,我有一个错误'import' and 'export' may only appear at the top level.我看到了很多这样的情况require,但它与es2015模块配合使用效果不错.这种限制有什么理由吗？

Webpack构建成功,我可以浏览到我的网页.然而,Javascript失败,说:'导入声明可能只出现在模块的顶层'

下面是我输出的app.js,其中包含import语句.

如何更改我的webpack配置文件以在构建时删除import语句？

webpackJsonp([0],{

/***/ 0:
/***/ function(module, exports, __webpack_require__) {

    __webpack_require__(1);
    __webpack_require__(74);
    module.exports = __webpack_require__(76);


/***/ },

/***/ 76:
/***/ function(module, exports) {

    "use strict";

    import 'app/tools/typescriptImports.ts';
    import * as mainScreenHelper from 'app/tools/mainScreenHelper';
    import React from 'react';
    import * as reactDom from 'react-dom';
    import Router from 'react-router';
    import createBrowserHistory from 'history/lib/createBrowserHistory';
    import routes from 'app/tools/routes';
    import 'style/app.scss';
    import 'font-awesome/scss/font-awesome.scss';

    mainScreenHelper.removeLoadingScreen();
    mainScreenHelper.createReactApp();

/***/ }

});
//# sourceMappingURL=app.js.map

这是我当前的配置文件:

'use strict';

//https://webpack.github.io/docs/configuration.html

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var …

在阅读了有关我的问题的一些问答后：

解析错误：“导入”和“导出”可能仅与“sourceType：模块”一起出现

• 忽略 ESLint 错误：“导入”和“导出”可能只出现在顶层
• 在 ES6 中使用 import 和 require 的正确方法是什么？
• 语法错误：“导入”和“导出”可能仅与“源类型：模块”一起出现 - 等等什么？

我将.eslintrc.json写入：

{
  "extends": ["airbnb", "prettier", "plugin:node/recommended"],
  "plugins": ["prettier"],
  "env": {
    "node": true,
    "es6": true,
    "browser": true
  },
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 11,
    "sourceType": "module",
    "allowImportExportEverywhere": true
  },
  "rules": {
    "prettier/prettier": "error",
    "spaced-comment": "off",
    "no-console": "warn",
    "consistent-return": "off",
    "func-names": "off",
    "object-shorthand": "off",
    "no-process-exit": "off",
    "no-param-reassign": "off",
    "no-return-await": "off",
    "no-underscore-dangle": "off",
    "class-methods-use-this": "off",
    "prefer-destructuring": ["error", { "object": true, "array": false }],
    "no-unused-vars": ["error", { …

在webpack版本2.1.0-beta.28中，他们添加了（我正在使用2.2.0-rc.1）：

添加import()为代码拆分构造。应该使用它，而不是System.import尽可能使用它 。System.import将在webpack 2发行版（已在webpack 3中删除）中弃用，因为根据规范它的行为是不正确的。

所以我转换：

require.ensure(['./hero/homepage'], () => {
  require('./hero/homepage')
}, 'hero-homepage')

进入：

import('./hero/homepage')
  .then(module => module.default)
  .catch(err => console.error(`Chunk loading failed, ${err}`))

但是得到： Module build failed: SyntaxError: 'import' and 'export' may only appear at the top level

我必须添加一些东西到webpack配置中，以允许在他们建议的地方使用导入吗？