Question

我正在尝试编译我的Javascript（es6）以供使用服务器端，我所针对的环境涉及：

node    8.9.1  
npm     6.0.0  
webpack 4.8.1

我尝试使用webpack编译的代码的第一部分是文件index.js，它就是这样开始的。

import express from 'express';
import https from 'https';

// Import socket.io
let io = require('socket.io').Server;

// Now import some basic middleware for express
import * as session from 'express-session';
import * as bodyParser from 'body-parser';
import * as favicon from 'serve-favicon';

// Import useful file IO
import * as path from 'path';
let fs = require('fs');
...

但是当我运行webpack时，我收到以下错误：

$ webpack

Webpack is watching the files…

Hash: 1bd3f903f9c5ccdc3456
Version: webpack 4.8.1
Time: 684ms
Built at: 2018-05-10 14:51:08
                       Asset      Size  Chunks             Chunk Names
                   server.js  3.97 KiB    main  [emitted]  main
               server.js.map  2.52 KiB    main  [emitted]  main
../dist/keys/it-test-crt.crt  1.16 KiB          [emitted]  
  ../dist/images/favicon.ico  1.19 KiB          [emitted]  
../dist/keys/it-test-csr.pem  1.02 KiB          [emitted]  
../dist/keys/it-test-key.pem  1.64 KiB          [emitted]  
Entrypoint main = server.js server.js.map
[./index.js] 1.2 KiB {main} [built] [failed] [1 error]

ERROR in ./index.js
    Module build failed: Error: Parse Error: Line 1: Illegal import declaration
...

BTW我在它的es6化身使用Javascript所以需要Bable，它在我的配置（q.v.）。即使我没有使用es6，Webpack文档也建议import应该得到尊重，请参阅here，Webpack文档说明：

webpack的第2版本身支持ES6模块语法，这意味着您可以使用导入和导出而无需像babel这样的工具来为您处理。

所以我的问题是为什么我会看到上述错误？我目前的假设是我在Webpack的配置中出现了错误，见下文：

var nodeExternals = require('webpack-node-externals');
var CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    context:        __dirname,

    mode:           'development',

    entry:          './index.js',

    output:         {
                    filename:   'server.js',
                    path:        __dirname + '/../dist/'
                    },

    devtool:        'source-map',

    resolve:        {
                    extensions: ['.js', '.jsx', '.json'],
                    modules: ['./', 'node_modules']
                    },

    module:         {
                    rules:[
                            {
                            test: /\.js?$/,
                            use: {
                                loader: 'babel-loader?presets[]=env',
                                }
                            },
                            {
                            test: /\.jsx?$/,
                            use: {
                                loader: 'jsx-loader?harmony'
                            }
                            },
                            {
                            enforce: 'pre',
                            test: /\.js$/,
                            loader: 'source-map-loader'
                            }
                        ]
                    },

    target:         'node',

    node:           {
                    __dirname: false,
                    __filename: false
                    },

    externals:      [nodeExternals()],

    watch:          true,

    watchOptions:   {
                    ignored: /node_modules/
                    },

    plugins:        [
                    new CopyWebpackPlugin([
                        {from:  'images',   to: '../dist/images'},
                        {from:  'keys',     to: '../dist/keys'}
                        ])
                    ]
  };

我没有设置.babelrc文件，因为我将presets[]=env查询附加到babel-loader。为了防止知道任何其他版本号，package.json看起来像这样：

{
"name": "web-app",
"version": "1.0.0",
"description": "A web application using react, etc. ",
"main": "index.js",
"repository": {
    "type": "git",
    "url": "git+https://github.com/nigel-daniels/web-app.git"
    },
"keywords": [
    "web",
    "app",
    "react",
    "redux"
    ],
"author": "Nigel Daniels",
"license": "MIT",
"bugs": {
    "url": "https://github.com/nigel-daniels/web-app/issues"
    },
"homepage": "https://github.com/nigel-daniels/web-app#readme",
"dependencies": {
    "async": "^2.6.0",
    "bcrypt-nodejs": "0.0.3",
    "body-parser": "^1.18.2",
    "cookie-parser": "^1.4.3",
    "debug": "^3.1.0",
    "express": "^4.16.2",
    "express-session": "^1.15.6",
    "express-socket.io-session": "^1.3.2",
    "fs": "0.0.1-security",
    "immutable": "^3.8.2",
    "mongoose": "^5.0.6",
    "nodemailer": "^4.4.0",
    "passport": "^0.4.0",
    "passport-local": "^1.0.0",
    "react": "^16.1.1",
    "react-dom": "^16.1.1",
    "redux": "^3.7.2",
    "serve-favicon": "^2.4.5",
    "socket.io": "^2.0.4"
    },
"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "chai": "^3.5.0",
    "chai-immutable": "^1.6.0",
    "copy-webpack-plugin": "^4.2.3",
    "jsx-loader": "^0.13.2",
    "mocha": "^5.0.1",
    "source-map-loader": "^0.2.3",
    "webpack": "^4.8.1",
    "webpack-node-externals": "^1.7.2"
    },
"engines": {
    "node": "^8.1.0",
    "npm": "6.0.0"
    }
}

感谢您的任何建议！

Answer 1

我认为问题在于快递模块使用module.exports导出，而import导入es2015。我不认为webpack原生支持转换。我只是在导入npm模块时使用require，但是否则你这个babel插件可能会为你解决它：https://www.npmjs.com/package/babel-plugin-transform-es2015-modules-commonjs。

Webpack抛出'非法导入声明'，怀疑配置错误

1 个答案: