javascript - ES6 : Unexpected token import

Question

在设置 Javascript 开发环境时出现以下错误。

我想使用 import 而不是 require。

npm install babel-register babel-preset-env --save-dev

我用的是 babel。

 import express from 'express';
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:617:28)
    at loader (D:\firstapp\node_modules\babel-register\lib\node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (D:\firstapp\node_modules\babel-register\lib\node.js:154:7)

我尝试了以下的许多解决方案，但对我来说都不起作用。

Node error: SyntaxError: Unexpected token import

Node.js - SyntaxError: Unexpected token import

srcServer.js

import express from 'express';
import path from 'path';
import open from 'open';
import webpack from 'webpack';
import config from '../webpack.config.babel.js';

const port = 3000;
const app = express();
const compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname, '../src/index.html'));
});

app.listen(port, function(err) {
    if (err) {
        console.log(err);
    } else {
        open('http://localhost:' + port);
    }
});

.babelrc

{
  "presets": ["@babel/preset-env"]
}

Answer 1

我终于找到了解决方案。我在根文件夹中创建了 .babelrc 文件，内容如下。

{
    "presets": ["latest"]
}

然后 npm install 和 npm start -s 对我有用。

如果有人有问题，我会在这里发布我的所有文件。

tools/srcServer.js

import express from 'express';
import path from 'path';
import open from 'open';
import webpack from 'webpack';
import config from '../webpack.config.dev.js';

const port = 3000;
const app = express();
const compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname, '../src/index.html'));
});

app.listen(port, function(err) {
    if (err) {
        console.log(err);
    } else {
        open('http://localhost:' + port);
    }
});

webpack.config.dev.js

import path from 'path';

export default {
  debug: true,
  devtool: 'inline-source-map',
  noInfo: false,
  entry: [
    path.resolve(__dirname, 'src/index')
  ],
  target: 'web',
  output: {
    path: path.resolve(__dirname, 'src'),
    publicPath: '/',
    filename: 'bundle.js'
  },
  plugins: [],
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loaders: ['babel']},
      {test: /\.css$/, loaders: ['style','css']}
    ]
  }
}

package.json

{
  "name": "firstapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "npm-run-all --parallel open-src",
    "open-src": "babel-node tools/srcServer.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.17.0",
    "babel-loader": "6.2.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-latest": "^6.16.0",
    "babel-register": "^6.16.3",
    "chai": "3.5.0",
    "chalk": "1.1.3",
    "cheerio": "0.22.0",
    "compression": "^1.7.3",
    "cross-env": "3.1.3",
    "css-loader": "0.25.0",
    "eslint": "3.8.1",
    "eslint-plugin-import": "^2.14.0",
    "eslint-watch": "2.1.14",
    "express": "^4.16.4",
    "extract-text-webpack-plugin": "1.0.1",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "2.22.0",
    "image-webpack-loader": "^4.3.1",
    "jsdom": "9.8.0",
    "json-schema-faker": "^0.4.7",
    "json-server": "^0.14.0",
    "localtunnel": "^1.9.1",
    "mocha": "3.1.2",
    "nock": "8.1.0",
    "npm-run-all": "3.1.1",
    "nsp": "2.6.2",
    "numeral": "1.5.3",
    "open": "0.0.5",
    "rimraf": "2.5.4",
    "style-loader": "0.13.1",
    "webpack": "1.13.2",
    "webpack-dev-middleware": "1.8.4",
    "webpack-hot-middleware": "2.13.0",
    "webpack-md5-hash": "0.0.5"
  },
  "dependencies": {
    "add": "^2.0.6"
  }
}