在浏览器中需要javascript

Question

所以我正在开发一个不会通过 Node 运行的 React 单页应用程序。我想使用 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 可以做一些其他有趣的事情!