node.js - babel 在导入声明时遇到问题

Question

我正在使用 ES6 中的 Node 做一个项目，该项目使用 babel-node 来运行。现在我正在尝试以更生产的方式实现 babel，并尝试了两次尝试。

Webpack babel-loader 具有以下配置:

module.exports = {
  entry: './src/cloud/main.js',
  devtool: 'source-map',
  output: {
    path: './src/static/build',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: [
          'babel-loader?presets[]=es2015',
        ],
      },
      {
        test: /\.css$/,
        loaders: [
          'style-loader',
          'css-loader',
        ],
      },
      {
        test: /\.html$/,
        loaders: [
          'raw-loader',
        ],
      },
    ],
  },
}

它开始提示 main.js 中的 import 语句，并使用我在类似问题中找到的 ?presets[]=es2015 来消除它。然后问题出现了，它过滤了进入node_modules的导入语句，并显示以下消息:

./~/socket.io/lib/index.js 中出现错误 找不到模块:错误:无法解析模块“fs”

我的另一种方法是使用这样的寄存器 Hook :

require('babel-core/register')({
  ignore: /node_modules/,
});
require('./main.js');

但它抛出了这条消息: 从“ express ”进口 express ； ^^^^^^

语法错误:意外的保留字

//main.js - 简化

import express from 'express'
const app = express()
const server = app.listen(port, () => {
  console.log(`Listening at http://${server.address().address === '::' ? 'localhost' : server.address().address}:${server.address().port}`)
})

Answer 1

我认为您不需要在加载器配置中排除 node_modules 。但是，您可能想让 webpack 知道要解决什么问题。尝试添加这样的内容:

resolve: {
    root: path.join(__dirname),
    fallback: path.join(__dirname, 'node_modules'),
    modulesDirectories: ['node_modules'],
    extensions: ['', '.json', '.js', '.jsx', '.scss', '.png', '.jpg', '.jpeg', '.gif']
},

modulesDirectories 键应该可以防止 webpack 运行工作目录中的每个 require/import。

此外，将目标添加到配置顶部应该可以解决 fs 等内置函数的问题

target: 'node'