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

您明确将node_modules排除在babel-loader之外：

exclude: /node_modules/,

如果你想从node_modules通过babel传递模块，你需要调整一下。您可以考虑明确包含这样的内容：

// 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/,
],

Webpack无法在外部包中构建ES6

1 个答案: