Webpack 无法在外部包中构建 ES6

Webpack fails to build ES6 in external packages

本文关键字:包中 构建 ES6 外部 Webpack      更新时间:2023-09-26

我正在尝试在项目中使用 ES6 npm 包(在本例中称为 gamesystem)并使用 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;

您明确地从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/,
],