Fatal编程技术网
  • javascript/
  • Javascript 将组件拆分为单独的文件

Javascript 将组件拆分为单独的文件

javascript class reactjs

Javascript 将组件拆分为单独的文件,javascript,class,reactjs,components,react-jsx,Javascript,Class,Reactjs,Components,React Jsx,这似乎是一个常见的问题，我发现很多人都在问这个问题，回答都很不一样，似乎有点偶然。我看过各种视频教程，阅读了大量教程和文档。但遗憾的是，反应的速度似乎比作家们所能跟上的还要快。或者我只是误会 我想在一个单独的文件中创建每个组件，这样做是合乎逻辑的。我正在工作，但无法确定如何导入和使用其他文件。我不知道这是否是因为Chrome在不在web服务器（本地测试开发人员）上时不会加载文件，或者我只是把事情搞错了 这是我的HTML： <!DOCTYPE html> <html lang="

这似乎是一个常见的问题，我发现很多人都在问这个问题，回答都很不一样，似乎有点偶然。我看过各种视频教程，阅读了大量教程和文档。但遗憾的是，反应的速度似乎比作家们所能跟上的还要快。或者我只是误会

我想在一个单独的文件中创建每个组件，这样做是合乎逻辑的。我正在工作，但无法确定如何导入和使用其他文件。我不知道这是否是因为Chrome在不在web服务器（本地测试开发人员）上时不会加载文件，或者我只是把事情搞错了

这是我的HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React Test One</title>
</head>
<body>
<div id="rootNode"></div>
<script src="dist/bundle.js"></script>
</body>
</html>
以及package.json：

{
  "name": "reacttestone",
  "version": "1.0.0",
  "description": "Testing React Components",
  "main": "index.js",
  "dependencies": {
    "babel-preset-react": "^6.1.2",
    "babelify": "^7.2.0",
    "react": "^0.14.2",
    "react-dom": "^0.14.2"
  },
  "devDependencies": {
    "gulp": "^3.9.0",
    "vinyl-source-stream": "^1.1.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Myself",
  "license": "MIT"
}
您的es6导出示例（如导出默认正方形）应该可以正常工作。看起来您已经安装了babelify，但在转换过程中没有使用它，因此浏览器抱怨您试图在严格模式之外使用es6功能

如果你看一下说明书，上面写着做如下事情：

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var gutil = require('gulp-util');

gulp.task('browserify', function () {
    browserify('./src/main.js', { debug: true })
        .transform('babelify', {presets: ['es2015', 'react']})
        .bundle()
        .on('error', gutil.log)
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('./dist'))
});

gulp.task('watch',function() {
    gulp.watch('./src/**/*.js', ['browserify'])
});
看起来您只安装了
babel-preset-react
，您需要执行
npm i babel-preset-es2015--保存开发
。另外，
babelify
和
babel-preet-react
也很好，因为
devdeependencies

你好，谢谢。这给了我一个错误：
import React from'React'；^ParseError:“导入”和“导出”可能仅与“sourceType:module”一起出现
，但我认为这是另一个问题，因此我将把您的答案标记为答案。如果我使用我的窗口。Square=Square；我现在得到的方法是：
（let、const、function、class）在严格模式之外还不受支持
@Andrew这样看来，在试图使用es6功能的浏览器中，有些东西仍然不起作用。您可以将“use strict”放在文件的顶部，但是除了最新的浏览器（部分支持es6）之外，它在其他浏览器中不起作用。我建议你要么试着让这一点的宝贝工作，或切换到高级网页bundler@Andrew见编辑后的文章，未经测试，但从我所读到的，将有望工作 
import React from 'react';

class Square extends React.Component{
    render() {
        return (
            <p>Square</p>
        )
    }
}

export default Square;

var {Component} = React;

class Square extends Component{
    render() {
        return (
            <p>Square</p>
        )
    }
}

window.Square = Square;

var vendors = [
    'react'
];

gulp.task('vendors', function () {
    var stream = browserify({
        debug: false,
        require: vendors
    });

    stream.bundle()
        .pipe(source('./src/main.js'))
        .pipe(gulp.dest('./dist/bundle.js'));

    return stream;
});

{
  "name": "reacttestone",
  "version": "1.0.0",
  "description": "Testing React Components",
  "main": "index.js",
  "dependencies": {
    "babel-preset-react": "^6.1.2",
    "babelify": "^7.2.0",
    "react": "^0.14.2",
    "react-dom": "^0.14.2"
  },
  "devDependencies": {
    "gulp": "^3.9.0",
    "vinyl-source-stream": "^1.1.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Myself",
  "license": "MIT"
}

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var gutil = require('gulp-util');

gulp.task('browserify', function () {
    browserify('./src/main.js', { debug: true })
        .transform('babelify', {presets: ['es2015', 'react']})
        .bundle()
        .on('error', gutil.log)
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('./dist'))
});

gulp.task('watch',function() {
    gulp.watch('./src/**/*.js', ['browserify'])
});