Webpack 和 React 小书
Webpack 和 React 小书全文地址 这本小书的目的是引导你进入 React 和 Webpack 的世界。他们两个都是非常有用的技术，如果同时使用他们，前端开发会更加有趣。 这本小书会提供所有相关的技能。如果你只是对 React 感兴趣，那可以跳过 Webpack 相关的内容，反之亦然。 如果想学习更多的相关知识可以移步 SurviveJS - Webpack and React。 ReactReact 是一个能够让开发模块变成简单的库。一旦你理解他的工作原理，那你就可以用它搭建自己的程序，这是不同类似 Angular 那种试着包揽一切的框架不同的地方。 如果你想很快过一遍 React 的知识点，那么 React 官方教程 是一个很好的开始。 可能 React 最有趣的事是它一直会尝试调整传统的 web 组件的思路。它让我们重新思考关注点的分离。它（React Native）也会影响 App 开发。 React Native 提供了一种使用 Javascript 开发原生应用同时保证了原生性能。 WebpackWebpack 非常容易操作，它是一个模块合并的工具，本质就是一个能够把各种组件（HTML，CSS，JS）构建成项目。最方便的是你只需要初始化配置一次，Webpack 会替你做那些繁琐的事情，同时也保证了让你可以在项目中混合使用各种技术而不头疼。 如果你在 Webpack 方面完全是新手的，但想开始一个简单的教程的话，可以去 Pete Hunt's guide。你可以在那里学习到一些基础的使用，这里只是那边的一个补充。 介绍 Webpack在 Web 开发历程上，我们构建了很多小型的技术解决方案，比如用 HTML 去描述页面结构，CSS 去描述页面样式，Javascript 去描述页面逻辑，或者你也可以用一些比如 Jade 去取代 HTML，用 Sass 或 Less 去取代CSS，用 CoffeeScript 或者 TypeScript 之类的去取代 Javascript，不过项目中的依赖可能是一件比较烦恼的事情。（需要安装额外很多的库） 这里有很多为什么我们需要尝试那些新技术的理由。不管我们用什么，总之，我们还是希望使用那些能够处理在浏览器端的方案，所以出来了编译方案。历史上已经有很多分享了，比如 Make 可能是很多解决方案中最知名且是可行的方案。Grunt 和 Gulp 是在是前端的世界中最流行的解决方案，他们两个都有很多非常有用的插件。NPM（Node.js 的包管理器）则包含了他们两个。 GruntGrunt 是相比后面几个更早的项目，他依赖于各种插件的配置。这是一个很好的解决方案，但是请相信我，你不会想看到一个 300 行的 javascriptmodule.exports = function(grunt) {
grunt.initConfig({
jshint: {
files: ['Gruntfile.js','src/**/*.js','test/**/*.js'],options: {
globals: {
jQuery: true
}
}
},watch: {
files: ['<%= jshint.files %>'],tasks: ['jshint']
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['jshint']);
};
GulpGulp 提供了一个不一样的解决方案，而不是依赖于各种插件的配置。Gulp 使用了一个文件流的概念。如果你熟悉 Unix，那么 Gulp 对你来说会差不多，Gulp 会提供你一些简单化的操作。在这个解决方案中，是去匹配一些文件然后操作（就是说和 JavaScript 相反）然后输出结果（比如输出在你设置的编译路径等）。这里有一个简单的 javascriptvar gulp = require('gulp');
var coffee = require('gulp-coffee');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var del = require('del');
var paths = {
scripts: ['client/js/**/*.coffee','!client/external/**/*.coffee'],};
// 不是所有的任务需要使用 streams
// 一个 gulpfile 只是另一个node的程序，所以你可以使用所有 npm 的包
gulp.task('clean',function(cb) {
// 你可以用 `gulp.src` 来使用多重通配符模式
del(['build'],cb);
});
gulp.task('scripts',['clean'],function() {
// 压缩和复制所有 JavaScript （除了第三方库）
// 加上 sourcemaps
return gulp.src(paths.scripts)
.pipe(sourcemaps.init())
.pipe(coffee())
.pipe(uglify())
.pipe(concat('all.min.js'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('build/js'));
});
// 监听文件修改
gulp.task('watch',function() {
gulp.watch(paths.scripts,['scripts']);
});
// 默认任务（就是你在命令行输入 `gulp` 时运行）
gulp.task('default',['watch','scripts']);
这些配置都是代码，所以当你遇到问题也可以修改，你也可以使用已经存在的 Gulp 插件，但是你还是需要写一堆模板任务。 Browserify处理 Javascript 模块一直是一个大问题，因为这个语言在 ES6 之前没有这方面的概念。因此我们还是停留在90年代，各种解决方案，比如提出了 AMD。在实践中只使用 CommonJS （ Node.js 所采用的格式）会比较有帮助，而让工具去处理剩下的事情。它的优势是你可以发布到 NPM 上来避免重新发明轮子。 Browserify 解决了这个问题，它提供了一种可以把模块集合到一起的方式。你可以用 Gulp 调用它，此外有很多转换小工具可以让你更兼容的使用（比如 watchify 提供了一个文件监视器帮助你在开发过程中更加自动化地把文件合并起来），这样会省下很多精力。毋庸置疑，一定程度来讲，这是一个很好的解决方案。 WebpackWebpack 扩展了 CommonJs 的 javascriptmodule.exports = {
entry: "./entry.js",output: {
path: __dirname,filename: "bundle.js"
},module: {
loaders: [
{ test: /.css$/,loader: "style!css" }
]
}
};
在接下来的章节中我们会使用 Webpack 来构建项目来展示它的能力。你可以用其他工具和 Webpack 一起使用。它不会解决所有事情，只是解决一个打包的难题，无论如何，这是在开发过程中需要解决的问题。 踏上征途
开始使用 Webpack 非常简单，我会展示给你看使用它的一个简单的项目。第一步，为你的项目新建一个文件夹，然后输入 安装 Webpack接下来我们安装 Webpack，我们要把它安装在本地，然后把它作为项目依赖保存下来。这样你可以在任何地方编译（服务端编译之类的）。输入 目录结构项目的目录结构长这样：
我们会使用 Webpack 在我们的 设置 WebpackWebpack 的配置文件长这样： webpack.config.js javascriptvar path = require('path');
module.exports = {
entry: path.resolve(__dirname,'app/main.js'),output: {
path: path.resolve(__dirname,'build'),filename: 'bundle.js',},};
运行你的第一个编译现在我们有了一个最简单的配置，我们需要有什么东西去编译，让我们开始一个经典的 app/component.js javascript'use strict';
module.exports = function () {
var element = document.createElement('h1');
element.innerHTML = 'Hello world';
return element;
};
app/main.js javascript'use strict';
var component = require('./component.js');
document.body.appendChild(component());
现在在你的命令行运行 build/index.html html<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
运行应用只要双击 index.html 或者设置一个 Web 服务指向 设置
|