Question

我清除了我之前的问题。这次我提出更多信息的问题。我有一个索引文件和两个javascript文件。 index.php以及module.js和script.js。

在文件index.php内，有以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>My AngularJS App</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
    <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
    <link rel="stylesheet" href="app.css">-->
    <!--<link rel="stylesheet" href="assets/style.css">-->
    <!--<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>-->
</head>
<body>


 




<script type="text/javascript" src="components/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>-->
<script src="app.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
<script type="text/javascript" src="assets/script.js"></script>
</body>
</html>

在文件module.js中有以下代码：

   export class Foo
   {
        constructor(string)
        {
            this.string = string;
        }

        print()
        {
            console.log(this.string);
        }
   }

并且在文件script.js中有以下代码：

import { Foo } from "/module";

let test = new Foo('Hello world');
test.print();

使用导入命令时会发生此错误：

Unexpected token import。

这是package.json文件的内容：

{
  "name": "angular-seed",
  "private": true,
  "version": "0.0.0",
  "description": "A starter project for AngularJS",
  "repository": "https://github.com/angular/angular-seed",
  "license": "MIT",
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-core": "^6.25.0",
    "babel-preset-es2015": "^6.24.1",
    "bower": "^1.7.7",
    "http-server": "^0.9.0",
    "jasmine-core": "^2.4.1",
    "karma": "^0.13.22",
    "karma-chrome-launcher": "^0.2.3",
    "karma-firefox-launcher": "^0.1.7",
    "karma-jasmine": "^0.3.8",
    "karma-junit-reporter": "^0.4.1",
    "protractor": "^4.0.9",
    "webpack": "^3.2.0"
  },
  "scripts": {
    "postinstall": "bower install",
    "update-deps": "npm update",
    "postupdate-deps": "bower update",
    "prestart": "npm install",
    "start": "http-server -a localhost -p 8000 -c-1 ./app",
    "pretest": "npm install",
    "test": "karma start karma.conf.js",
    "webpack": "webpack",
    "test-single-run": "karma start karma.conf.js --single-run",
    "preupdate-webdriver": "npm install",
    "update-webdriver": "webdriver-manager update",
    "preprotractor": "npm run update-webdriver",
    "protractor": "protractor e2e-tests/protractor.conf.js",
    "update-index-async": "node -e \"var fs=require('fs'),indexFile='app/index-async.html',loaderFile='app/bower_components/angular-loader/angular-loader.min.js',loaderText=fs.readFileSync(loaderFile,'utf-8').split(/sourceMappingURL=angular-loader.min.js.map/).join('sourceMappingURL=bower_components/angular-loader/angular-loader.min.js.map'),indexText=fs.readFileSync(indexFile,'utf-8').split(/\\/\\/@@NG_LOADER_START@@[\\s\\S]*\\/\\/@@NG_LOADER_END@@/).join('//@@NG_LOADER_START@@\\n'+loaderText+'    //@@NG_LOADER_END@@');fs.writeFileSync(indexFile,indexText);\""
  }
}

同时，我使用phpstrom。我从File > New Project > Angularjs创建了这个项目。

因此，会自动创建一些文件。我使用Nodejs v 8.1.4。

这也是自动创建的文件的图片。如果您愿意，可以创建一个测试项目。

Answer 1

在根文件夹中创建一个文件：webpack.config.js

module.exports = {
  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        include: ['/app']
      }
    ]
  }
};

不要忘记在devDependencies中安装babel-loader软件包： npm i -D babel-loader

在ECMAScript 6中使用命令导入时出错

1 个答案: