Webpack无法在外部软件包中构建ES6

Question

我正在尝试在项目中使用ES6 npm包（在这种情况下称为游戏系统），并使用webpack（和babel）进行构建，但无法在外部依赖项中构建任何ES6代码，这是为什么？ 如果我具有与具有相对路径的依赖项相同的代码，则可以正常工作。

应用程式码：

'use strict';

import World from 'gamesystem'; // Breaks
//import World from '../node_modules/gamesystem'; // Also breaks
//import World from '../gamesystem'; // Works (copied the same directory gamesystem outside the node_modules directory)

let world = new World();

错误：

ERROR in ./~/gamesystem/World.js
Module parse failed: /home/user/project/node_modules/gamesystem/World.js Line 3: Unexpected token
You may need an appropriate loader to handle this file type.
| 'use strict';
| 
| import System from './System';
| 
| export default class World {
 @ ./src/app.js 3:18-39

Webpack配置：

'use strict';

// Modules
let WebpackNotifierPlugin = require('webpack-notifier');
let HtmlWebpackPlugin = require('html-webpack-plugin');

let config = {
  entry: {
    app: __dirname + '/../src/app.js'
  },
  devtool: 'source-map',
  devServer: {
    stats: {
      modules: false,
      cached: false,
      colors: true,
      chunk: false
    },
    proxy: require('./devProxy')
  },
  module: {
    loaders: [{
      test: /\.js$/,
      loader: 'babel',
      exclude: /node_modules/,
      query: {
        presets: ['es2015', 'stage-0']
      }
    },
    {
      test: /\.css$/,
      loader: 'style!css'
    },
    {
      test: /\.html$/,
      loader: 'raw'
    }]
  },
  plugins: [
    new WebpackNotifierPlugin(),
    new HtmlWebpackPlugin({
      template: __dirname + '/../src/index.html',
      inject: 'body',
      minify: false
    })
  ]
};

module.exports = config;

Answer 1

您从babel-loader明确排除了node_modules ：

exclude: /node_modules/,

如果要通过babel从node_modules传递模块，则需要进行调整。 您可能会考虑像这样的显式包含：

// be sure to req path
// var path = require('path')

include: [
  // Include everything from your app path
  path.resolve(__dirname, 'my-app-js-path'),

  // Include gamesystem modules
  /\bgamesystem\b/,
],