无法在反应应用程序中导入模块获取：意外令牌导入

Question

好的，我对 react-node-express 三重奏很陌生。但我会尽力解释这个问题。我有一个由某人制作的库（模块/库）。我正在尝试将该模块中的一些功能导入到我的反应应用程序中 -

import {some_module} from 'some_library';

现在，该模块是一个导出此函数的独立项目，在该项目中它们有 - 导入对某个本地文件的引用，我的导入在加载该文件时会出错：

import * as Util from './util.js';
SyntaxError: Unexpected token import

我的 package.json 有以下依赖项：

"dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/runtime": "^7.4.3",
    "@bbmx/utilities": "^1.4.0",
    "axios": "^0.18.0",
    "babel-preset-stage-0": "^6.24.1",
    "config": "^3.1.0",
    "cookie-parser": "^1.4.4",
    "express": "^4.16.3",
    "grunt": "^1.0.1",
    "grunt-artifactory-artifact": "^1.0.1",
    "grunt-contrib-copy": "^1.0.0",
    "load-grunt-tasks": "4.0.0",
    "lodash": "^4.17.11",
    "node-fetch": "^2.6.0",
    "react": "^16.8.6",
    "react-dom": "^16.5.2",
    "react-redux": "^5.0.7",
    "react-router-dom": "^5.0.0",
    "redux": "^3.7.2",
    "redux-thunk": "^2.3.0",
  },
  "devDependencies": {
    "@babel/cli": "^7.1.2",
    "@babel/core": "^7.1.2",
    "@babel/node": "^7.2.2",
    "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
    "@babel/plugin-transform-runtime": "^7.4.3",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/register": "^7.4.4",
    "babel-loader": "^8.0.4",
    "babel-plugin-dynamic-import-node": "^2.2.0",
    "babel-polyfill": "^6.26.0",
    "css-loader": "^2.1.1",
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.12.1",
    "enzyme-to-json": "^3.3.5",
    "file-loader": "^3.0.1",
    "jest": "^24.7.1",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "mini-css-extract-plugin": "^0.6.0",
    "nodemon": "^1.18.11",
    "postcss-loader": "^3.0.0",
    "pre-commit": "^1.2.2",
    "script-loader": "0.7.2",
    "style-loader": "^0.23.1",
    "stylelint": "^10.0.1",
    "stylelint-config-standard": "^18.3.0",
    "webpack": "^4.31.0",
    "webpack-cli": "^3.1.2",
    "webpack-config-utils": "^2.3.1",
    "webpack-dev-middleware": "^3.6.2",
    "webpack-hot-middleware": "^2.24.3",
    "webpack-node-externals": "^1.7.2"
  }

并拥有带有以下配置的 .babelrc 文件。

{
  "presets": ["@babel/env", "@babel/react"],
  "plugins": ["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties","@babel/plugin-syntax-dynamic-import"]
}

使用 web-pack.config 为：

const path = require('path');
const webpack = require('webpack');
const { getIfUtils } = require('webpack-config-utils');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { ifProduction } = getIfUtils(process.env.NODE_ENV || 'development');
const mode = process.env.NODE_ENV || 'development';
const pkg = require('./package.json');

module.exports = [
    {
        name: 'client',
        entry: {
            client: ['./client', 'webpack-hot-middleware/client'],
            bundle: './client/bundle.js'
        },
        output: {
            path: path.resolve(__dirname, `dist/client/${pkg.version}`),
            filename: '[name].js',
            publicPath: `/${pkg.version}`
        },
        devtool: ifProduction('nosources-source-map', 'source-map'),
        resolve: {
            modules: [path.resolve('./client'), path.resolve('./node_modules')]
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: 'babel-loader'
                },
                {
                    test: /fp-clientlib-v3.js/,
                    use: ['script-loader']
                },
                {
                    test: /\.less$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        'less-loader'
                    ]
                },
                {
                    test: /\.(ttf|eot|svg|woff2?)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                    loader: 'file-loader?name=fonts/[name].[ext]'
                },
                {
                    test: /\.png/,
                    loader:
                        'file-loader?limit=150000&mimetype=image/png&name=images/[name].[ext]'
                },
                {
                    test: /\.jpg/,
                    loader:
                        'file-loader?limit=150000&mimetype=image/jpeg&name=images/[name].[ext]'
                },
                {
                    test: /\.gif/,
                    loader:
                        'file-loader?limit=150000&mimetype=image/gif&name=images/[name].[ext]'
                },
                {
                    test: /\.ico/,
                    loader:
                        'file-loader?limit=150000&mimetype=image/ico&name=images/[name].[ext]'
                }
            ]
        },
        mode,
        plugins: [
            new webpack.HotModuleReplacementPlugin(),
            new MiniCssExtractPlugin()
        ]
    }

有人可以帮我解释为什么会发生这种情况吗？

Answer 1

Node JS 当前不支持 ES6 导入。 node js 中的Enable ES6 imports 为这个问题提供了解决方案。我已经厌倦了这个，它对我有用。 运行命令：

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

现在您需要创建一个新文件（config.js）并将以下代码添加到其中。

require('babel-register')({
    presets: [ 'env' ]
})
// Import the rest of our application.
module.exports = require('./your_server_file.js')

现在您可以编写导入语句而不会出现任何错误。

希望这会有所帮助。

您需要运行使用上述代码创建的新文件。就我而言，它是 config.js。所以我必须跑：

node config.js

或

我找到了一个简单的解决方案。

在项目的根目录中创建 .babelrc 文件。

添加以下（以及您需要的任何其他 babel 预设，可以在此文件中添加）：

{
    "presets": ["env"]
}

使用命令 npm install babel-preset-env --save 安装 babel-preset-env，然后使用命令 npm install babel-cli -g --save 安装 babel-cli

现在，转到您的服务器或索引文件所在的文件夹并使用以下命令运行：babel-node fileName.js

或者您可以通过将以下代码添加到您的 package.json 文件中来使用 npm start 运行：

"scripts": {
    "start": "babel-node src/index.js"
}