浏览器中的javascript需要答案

【问题标题】：javascript require in browser浏览器中的javascript需要
【发布时间】：2015-07-27 02:38:37
【问题描述】：

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

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

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

【问题讨论】：

您正在寻找Browserify 包。
我试过了，但没用
@JohnSmith 这看起来不像是有效的 JavaScript。你的意思是onResize(event, function(element, size) {？
@AaronDufour 这不是 Javascript，它的 JSX。

标签： javascript node.js reactjs

【解决方案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 可以做一些其他花哨的事情！

【讨论】：

嘿，有趣的答案！介意看看我刚刚发布的一种类似但不同的问题吗？ stackoverflow.com/questions/43237875/…

【解决方案2】：

正如 cmets 中所述，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。

【讨论】：