为什么我的捆绑文件不包含所有 jsx 文件？

Question

我正在尝试用我现有的 asp.net 应用程序实现 reactJS，我不希望我的 node_modules 文件夹在我的解决方案中。

我是 node.js 和 npm 的新手，所以我可能会在这里做一些奇怪的事情。

我正在尝试将我的 node_modules、package.json 和 wbpack.config.js 文件与我的 jsx 文件和入口文件分开。

当我运行 webpack 我没有得到任何错误，但生成的 js 文件只是一个导入语句。

我正在使用 Babel 和 WebPack。

我的 import 语句找不到我的 StoryBox Class 这是一个范围问题吗？

.
+-- rebate_mapper
|   +-- node_modules
|   +-- package.json
|   +-- webpack.config.js
+-- smasolutions.com
|   +-- admin
|   |   +-- rebate
|   |   |   +-- App
|   |   |   |   +-- index.jsx
|   |   |   +-- bundle.js
|   |   |   +-- default.aspx
|   |   |   +-- main.js

webpack.config.js

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

module.exports = {
  context: path.join(__dirname, './../smasolutions.com/admin/rebate'),
  entry: path.join(__dirname, './../smasolutions.com/admin/rebate/main.js'),
  output: {
    path: '../smasolutions.com/admin/rebate/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /.jsx?$/,
      include: path.join(__dirname, './../smasolutions.com/admin/rebate/app'),
      loader: 'babel-loader',
      exclude: /node_modules/,
      query: {
        presets: ['es2015', 'react']
      }
    }]
  },


};

import StoryBox from './index.jsx';

/******/
(function(modules) { // webpackBootstrap
  /******/ // The module cache
  /******/
  var installedModules = {};

  /******/ // The require function
  /******/
  function __webpack_require__(moduleId) {

    /******/ // Check if module is in cache
    /******/
    if (installedModules[moduleId])
    /******/
      return installedModules[moduleId].exports;

    /******/ // Create a new module (and put it into the cache)
    /******/
    var module = installedModules[moduleId] = {
      /******/
      exports: {},
      /******/
      id: moduleId,
      /******/
      loaded: false
        /******/
    };

    /******/ // Execute the module function
    /******/
    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

    /******/ // Flag the module as loaded
    /******/
    module.loaded = true;

    /******/ // Return the exports of the module
    /******/
    return module.exports;
    /******/
  }


  /******/ // expose the modules object (__webpack_modules__)
  /******/
  __webpack_require__.m = modules;

  /******/ // expose the module cache
  /******/
  __webpack_require__.c = installedModules;

  /******/ // __webpack_public_path__
  /******/
  __webpack_require__.p = "";

  /******/ // Load entry module and return exports
  /******/
  return __webpack_require__(0);
  /******/
})
/************************************************************************/
/******/
([
  /* 0 */
  /***/
  function(module, exports) {

    import StoryBox from './index.jsx';



    /***/
  }
  /******/
]);

已更新Webpack.config.js

module: {
    loaders: [
        {
            test: /.jsx?$/,
            include: path.join(__dirname,'./../smasolutions.com/admin/rebate'),
            
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: [
                    require.resolve('babel-preset-es2015'),
                    require.resolve('babel-preset-react')
                ]
            }
        }
    ]
},
resolveLoader: {
    root: path.join(__dirname, 'node_modules')
   
},

};

使用require.resolve()解决了babel找不到预设的问题。

Answer 1

您已配置入口文件

entry: path.join(__dirname, './../smasolutions.com/admin/rebate/main.js'),

很好，但是你有 ES6，你的 babel-loader 配置只适用于 /app 文件夹：

include: path.join(__dirname, './../smasolutions.com/admin/rebate/app'),

表示main.js里面的ES6不会被处理。你可能想要

include: path.join(__dirname, './../smasolutions.com/admin/rebate'),

为什么我的捆绑文件不包含所有 jsx 文件？

Why does my bundled file not include all jsx files?

asp.net

jsx

reactjs

webpack

babeljs