Question

所以我正在开发一个反应单页应用程序，它不会通过节点运行。我想使用python服务网页，但几乎所有模块我都能找到他们使用＆＃39;要求＆＃39;包括其他模块。无论如何，我是否可以轻松地将现有需求重写为浏览器可以理解的内容或直接使用它们？

例如我想用这个： 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可以做一些其他花哨的东西！

Answer 2

正如评论中所述，Browserify是一个很好的工具，可以帮助您将CommonJS模块用于在浏览器中运行的Javascript。看起来你遇到了一些问题，不理解你的JSX代码。您需要将JSX代码转换为有效的Javascript，以便Browserify正常运行。我会给你一个gulp任务，为你自动完成整个过程。

首先，安装所需的模块：

npm install gulp-uglify vinyl-source-stream browserify reactify gulp-streamify --save-dev

和

npm install -g gulp-cli

接下来，创建您的Gulpfile.js并将其投入其中：

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var reactify = require('reactify');
var streamify = require('gulp-streamify');

gulp.task('build', function () {
    browserify({
        entries   : 'path/to/mainComponent.js', //where your main component lives
        transform : [reactify] //transform jsx
    })
        .bundle()
        .pipe(source('bundle.js')) //create file named 'bundle.js'
        .pipe(streamify(uglify('bundle.js'))) //minify
        .pipe(gulp.dest('path/to/destination')); //where you want your 'bundle.js' to be placed
});

您显然需要更改输入路径和目标路径以匹配项目的需要。如果您不希望将其命名为“bundle.js”

，则可以选择重命名该捆绑文件

完成后，只需输入gulp build，即可为您创建捆绑的Javascript。

浏览器{j}需要

2 个答案: