Question

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

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

我正在尝试将我的node_modules，package.json和wbpack.config.js文件从我的jsx文件和我的条目文件中分离出来。

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

我正在使用Babel和WebPack。

这是我的导入语句无法找到我的StoryBox类的范围问题吗？

＆＃13;

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

＆＃13;

webpack.config.js

＆＃13;

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']
      }
    }]
  },


};

＆＃13;

import StoryBox from './index.jsx';

＆＃13;

/******/
(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';



    /***/
  }
  /******/
]);

＆＃13;

更新了Webpack.config.js

＆＃13;

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')
   
},

};

＆＃13;

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

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

0 个答案: