浏览器中的 javascript require

Question

所以我正在开发一个 react 单页应用程序，它不会通过 Node 运行。我想使用 python 提供网页服务，但对于几乎所有模块，我发现它们使用“require”来包含其他模块。无论如何，我是否可以轻松地将现有需求重写为浏览器可以理解的内容或直接使用它们？

例如我想用这个: https://github.com/STRML/react-resizable

但我不知道如何让它在我的浏览器中工作......

Answer 1

你应该看看 Webpack。 只需要一个非常简单的webpack.config.js，然后就可以开始了。

var webpack = require('webpack');  
module.exports = {  
  entry: [
    'webpack/hot/only-dev-server',
    "./src/index.js"
  ],

  output: {
    path: __dirname + '/build',
    filename: "app.js"
  },

  devtool: 'sourcemap',

  jshint: {
    esnext: true
  },

  module: {

    preLoaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'eslint-loader'
    }],

    loaders: [
      { 
        test: /\.js?$/,
        exclude: /node_modules/,
        loaders: ['react-hot', 'babel']
      },
      { 
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          stage: 1
        }
      },
      { 
        test: /\.less$/,
        loader: 'style-loader!css-loader!less-loader'
      },
      { 
        test: /\.css$/,
        loader: "style-loader!css-loader"
      },
      { 
        test: /\.(png|jpg|woff)$/,
        loader: "url-loader?limit=100000"
      }, 
      { 
        test: /\.jpg$/,
        loader: "file-loader"
      }
    ]
  },

  plugins: [
    new webpack.NoErrorsPlugin()
  ]
};

在此示例中，webpack 将获取我的 index.js (称为入口点)并解析其路径上的每个需求。输出文件将 app.js 扔到 /build 文件夹中。

加载器是一个额外的好处，因此 Webpack 可以做一些其他奇特的事情!