babel 导入语句有问题答案

【问题标题】：babel having trouble with import statementbabel 导入语句有问题
【发布时间】：2016-02-06 07:03:50
【问题描述】：

我正在使用 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”

我的另一种方法是使用这样的注册钩子：

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

但它抛出了这个消息：从“快递”进口快递； ^^^^^^

SyntaxError: 意外的保留字

//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}`)
})

【问题讨论】：

看看这个关于运行 Babel 的答案。 stackoverflow.com/questions/30921806/…

标签： node.js express webpack babeljs

【解决方案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'

【讨论】：

我已经添加了你说的部分，并将 main.js 简化为 'var express = require('express');'供测试用。错误现在出现在 /~/express/lib/view.js 中的 WARNING 关键依赖项：78:29-56 依赖项的请求是表达式 @ /~/express/lib/view.js 78:29-56 错误在./~/express/~/send/~/statuses/codes.json 模块解析失败：/node_modules/express/node_modules/send/node_modules/statuses/codes.json 第2行：意外令牌

【解决方案2】：

好的，多亏了其他答案和 4m1r' 答案，我才知道。我发布示例代码。

var path = require('path');
var fs = require('fs');

var nodeModules = {};
fs.readdirSync('node_modules')
  .filter(function (x) {
    return ['.bin'].indexOf(x) === -1;
  })
  .forEach(function (mod) {
    nodeModules[mod] = 'commonjs ' + mod;
  });

module.exports = {
  name: 'server',
  target: 'node',
  context: path.join(__dirname, 'src', 'cloud'),
  entry: {
    server: './main.js'
  },
  output: {
    path: path.join(__dirname),
    filename: '[name].js'
  },
  externals: nodeModules,
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loaders: ['babel-loader?presets[]=es2015']}
    ]
  },
  resolve: {
    root: path.join(__dirname),
    fallback: path.join(__dirname, 'node_modules'),
    modulesDirectories: ['node_modules'],
  }
};

真正重要的是 externals 键，它可以防止它通过要求泄漏到 node_modules 并出于某种原因在 babel-loader 中指定 ?presets[]=2015。我接受 4m1r，因为它最终修复了代码。

【讨论】：