• 使用gulp进行React任务的构建


    例子中的React版本为v0.14.2.

    示例目录结构如下:

    - libs/
        - react/
    - node_modules/
    - src/
        - main.js
    - gulpfile.js
    - index.html
    - bundle.js
    - package.json
    

    其中,index.html代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	<div id="example"></div>
    	<script src="bundle.js"></script>
    </body>
    </html>
    

    src/main.js代码如下:

    let React = require('react');
    let ReactDOM = require('react-dom');
    
    ReactDOM.render(
    	<h1>Hello, world!</h1>,
    	document.getElementById('example')
    );
    

    在这里,选择使用browserify进行打包,gulp进行任务构建。由于使用了ES2015JSX语法,因此使用Babel进行转换。

    首先安装依赖:

    npm install --save react react-dom
    npm install --save-dev gulp browserify babelify vinyl-source-stream
    

    然后gulpfile.js代码为:

    var gulp = require('gulp');
    var browserify = require('browserify');
    var babelify = require('babelify');
    var source = require('vinyl-source-stream');
    
    gulp.task('script:build', function() {
    	browserify('src/main.js')
    		.transform(babelify, {
    			presets: ['es2015', 'react']
    		})
    		.bundle()
    		.pipe(source('bundle.js'))
    		.大专栏  使用gulp进行React任务的构建nx">pipe(gulp.dest('./'));
    });
    
    gulp.task('default', ['script:build']);
    

    但此时执行会报错,因为babelify需要安装相应的preset,因此在这里需要:

    npm install --save-dev babel-preset-es2015 babel-preset-react
    

    然后执行gulp即可。

    此时会将reactreact-dom一起打包到bundle.js中。

    如果不希望将外部依赖打包进来,即此时index.html中加入如下代码:

    <script src="libs/react/react.min.js"></script>
    <script src="libs/react/react-dom.min.js"></script>
    

    此时需要安装browserify-shim,即

    npm install --save-dev browserify-shim
    

    然后在package.json中配置:

    "browserify-shim": {
        "react": "global:React",
        "react-dom": "global:ReactDOM"
    }
    

    此时gulpfile.js代码为:

    var gulp = require('gulp');
    var browserify = require('browserify');
    var shim = require('browserify-shim');
    var babelify = require('babelify');
    var source = require('vinyl-source-stream');
    
    gulp.task('script:build', function() {
    	browserify('src/main.js')
    		.transform(babelify, {
    			presets: ['es2015', 'react']
    		})
    		.transform(shim)
    		.bundle()
    		.pipe(source('bundle.js'))
    		.pipe(gulp.dest('./'));
    });
    
    gulp.task('default', ['script:build']);
    

    与之前相比,多了一句.transform(shim)

  • 相关阅读:
    知识点:Mysql 索引优化实战(3)
    知识点:Mysql 索引原理完全手册(2)
    知识点:Mysql 索引原理完全手册(1)
    大数据体系:数据分析体系总图
    数据化分析:微信文章不增粉的主要原因
    提问:MicrosoftUnderlying input stream returned zero bytes
    优化:更优雅的异步代码?
    涨姿势:Mysql 性能优化完全手册
    总结:Java 集合进阶精讲1
    冷知识点:COLLATE 关键字是什么意思?
  • 原文地址:https://www.cnblogs.com/lijianming180/p/12099631.html
Copyright © 2020-2023  润新知