浏览器需要Javascript

javascript require in browser

本文关键字：Javascript 浏览器      更新时间：2023-09-26

所以我在一个反应单页应用程序不会通过节点运行。我想使用python服务的网页，但几乎所有的模块，我可以发现他们使用"要求"包括其他模块。无论如何，我都可以轻松地重写现有的要求，以使浏览器能够理解或直接使用它们?

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

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

你应该看看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可以做一些其他的花哨的东西!

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

首先，安装所需的模块:

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文件，如果你不希望它被称为"bundle.js"

完成后，只需键入gulp build，就会为您创建绑定的Javascript。

相关文章：