React with Webpack -1: 介紹&Helloworld

node.js 開發之react 學習1

context：node.js 開發的工具和lib發展的很快，in other worlds, 出現了太多的新東東。

在facebook的威名下的react自然吸引了很多的關注。

下面開始react的第一個學習過程。

轉載：
from fakefish

introduction

在 Web 開發歷程上，我們構建了很多小型的技術解決方案，比如用 HTML 去描述頁面結構，CSS 去描述頁面樣式，JavaScript 去描述頁面邏輯，或者你也可以用一些比如 Jade 去取代 HTML，用 Sass 或 Less 去取代CSS，用 CoffeeScript 或者 TypeScript 之類的去取代 JavaScript，不過項目中的依賴可能是一件比較煩惱的事情。（需要安裝額外很多的庫）

這里有很多為什么我們需要嘗試那些新技術的理由。不管我們用什么，總之，我們還是希望使用那些能夠處理在瀏覽器端的方案，所以出來了編譯方案。歷史上已經有很多分享了，比如 Make 可能是很多解決方案中最知名且是可行的方案。Grunt 和 Gulp 是在是前端的世界中最流行的解決方案，他們兩個都有很多非常有用的插件。NPM（Node.js 的包管理器）則包含了他們兩個。

Grunt

Grunt 是相比后面幾個更早的項目，他依賴于各種插件的配置。這是一個很好的解決方案，但是請相信我，你不會想看到一個 300 行的 Grunt 文件。如果你好奇 Grunt 的配置會如何，那么這里是有個從 Grunt 文檔 的例子：

module.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']);};

Gulp

Gulp 提供了一個不一樣的解決方案，而不是依賴于各種插件的配置。Gulp 使用了一個文件流的概念。如果你熟悉 Unix，那么 Gulp 對你來說會差不多，Gulp 會提供你一些簡單化的操作。在這個解決方案中，是去匹配一些文件然后操作（就是說和 JavaScript 相反）然后輸出結果（比如輸出在你設置的編譯路徑等）。這里有一個簡單的 Gulp文件的例子：

var 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 （除了第三方庫）// 加上 sourcemapsreturn 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 提供了一個文件監視器幫助你在開發過程中更加自動化地把文件合并起來），這樣會省下很多精力。毋庸置疑，一定程度來講，這是一個很好的解決方案。

Webpack

Webpack 擴展了 CommonJs 的 require 的想法，比如你想在 CoffeeScript、Sass、Markdown 或者其他什么代碼中 require 你想要的任何代碼的話，那么 Webpack 正是做這方面的工作。它會通過配置來取出代碼中的依賴，然后把他們通過加載器把代碼兼容地輸出到靜態資源中。這里是一個 Webpack 官網 上的例子：

module.exports = {entry: "./entry.js",output: {path: __dirname,filename: "bundle.js"},module: {loaders: [{ test: /\.css$/, loader: "style!css" }]} };

接下來的我們會使用 Webpack 來構建項目來展示它的能力。你可以用其他工具和 Webpack 一起使用。它不會解決所有事情，只是解決一個打包的難題，無論如何，這是在開發過程中需要解決的問題。

開始使用webpack

開始使用 Webpack 非常簡單，這里會展示給你看使用它的一個簡單的項目。
第一步，為你的項目新建一個文件夾。然后輸入 npm init，然后填寫相關問題。這樣會為你創建了 package.json，不用擔心填錯，你可以之后修改它。當然，如果喜歡，你可以自己手動創建一個package.json文件，而不要使用npm init來操勞。

npm init 命令說明：npm init [-f|--force|-y|--yes]This will ask you a bunch of questions, and then write a package.json for you.

安裝 Webpack

接下來我們安裝 Webpack，我們要把它安裝在本地，然后把它作為項目依賴保存下來。這樣你可以在任何地方編譯（服務端編譯之類的）。
輸入 npm i webpack –save-dev。如果你想運行它，就輸入 node_modules/.bin/webpack。

---

推薦： 學習階段，還是安裝global模式，這樣可以直接使用webpack

此項目的目錄結構長這樣：

• /app
  
  • main.js
  • component.js
• /build
  
  • bundle.js (自動創建)
  • index.html
• package.json
• webpack.config.js

我們會使用 Webpack工具， 基于我們的 /app 來自動創建 bundle.js 。

接下來，我們來設置 webpack.config.js。

設置 Webpack

把webpack.config.js修改一下，內容如下：

var path = require('path');module.exports = {entry: path.resolve(__dirname, 'app/main.js'),output: {path: path.resolve(__dirname, 'build'),filename: 'bundle.js',}, };

第一次編譯

現在我們有了一個最簡單的配置，我們需要去編譯一下，讓我們開始一個經典的 Hello World，設置 /app 像這樣：

app/component.js

'use strict';module.exports = function () {var element = document.createElement('h1');element.innerHTML = 'Hello world';return element; };

app/main.js

'use strict'; var component = require('./component.js');document.body.appendChild(component());

現在在命令行運行 webpack，然后你的應用會開始編譯，一個 bundle.js 文件就這樣出現在你的 /build 文件夾下，需要在 build/ 下的 index.html 去啟動項目。

build/index.html

<!DOCTYPE html> <html><head><meta charset="UTF-8"/></head><body><script src="bundle.js"></script></body> </html>

---

這個文件可以使用webpack的 html-webpack-plugin 來生成。如果你覺得新奇，可以操作一下。使用它幾乎就只是一個配置的問題。通常使用 Webpack 來進行工作就是這么個套路。

執行

只要雙擊build/ index.html 或者設置一個 Web 服務指向 build/ 文件夾。

設置 package.json 中的scripts section

類型make,或者java的ant、maven， 通過 npm 你可以執行build構建、運行、打開服務……，只要你在 package.json 中設置 scripts 的值就可以了，然后調用對應的指令就可以了。

在這個案例中我們把編譯步驟放到 npm run build 中執行：

執行npm i webpack –save 如果你想要把 Webpack 作為項目的開發依賴庫（項），就可以使用 –save-dev，這樣就非常方便地讓你在開發一個庫的時候，不會依賴工具（但不是個好方法！）。

把下面的內容添加到 package.json中。

"scripts": {"build": "webpack"}

這時，就可以運行npm run build執行我們在package.js中的build項了。
當項目越發復雜的時候，這樣的方法會變得越來越有效。你可以把所有復雜的操作隱藏在 scripts 里面來保證界面的簡潔。

不過這種方法會導致潛在的問題，就是如果你使用一些特殊的指令的時候，它們只能在 Unix 環境中使用。所以如果你需要考慮一些未知的環境中的話，那么 gulp-webpack 會是一個好的解決方案。

---

注意 NPM 會找到 Webpack，npm run 會把他臨時加到 PATH來讓我們這個神奇的命令工作。

開始工作流程

如果需要一直輸入 npm run build 確實是一件非常無聊的事情，幸運的是，我們可以把讓他安靜的運行，讓我們設置 webpack-dev-server。

設置 webpack-dev-server

第一步，輸入 npm i webpack-dev-server –save，安裝webpack-dev-server。這會耗費比較長的時間，保持耐心。

接著，我們需要去調整 package.json scripts 部分去包含這個指令，下面是基本的設置：

package.json

{"scripts": {"build": "webpack","dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"} }

當你在命令行里運行 npm run dev 的時候他會執行 dev 屬性里的值。這是這些指令的意思：

webpack-dev-server ： 在localhost:8080啟動web服務

–devtool eval ： Creates source urls for your code. Making you able to pinpoint by filename and line number where any errors are thrown

–progress ：顯示在bundle打包代碼的進度

–colors ： 在terminal上顯示為彩色

–content-base build ：配置輸出目錄

總結一下，當你運行 npm run dev 的時候，會啟動一個 Web 服務器，再監聽文件修改，然后自動重新合并打包bundle你的代碼。真的非常簡潔！

現在，訪問 http://localhost:8080/webpack-dev-server/index.html 你會看到效果了。

---

你看到的頁面是有webpack-dev-server提供服務的，所以頁面上由其注入了服務狀態的信息。而不是只有Hello World顯示。

服務自動刷新build

當運行 webpack-dev-server 的時候，它會監聽你的文件修改。當項目重新bundle合并之后，會通知瀏覽器刷新。為了能夠觸發這樣的行為，你需要把你的 index.html 放到 build/ 文件夾下，然后做這樣的修改：

build/index.html

<!DOCTYPE html> <html><head><meta charset="UTF-8"/></head><body><script src="http://localhost:8080/webpack-dev-server.js"></script><script src="bundle.js"></script></body> </html>

接著，在webpack.config.js中，我們需要增加一個腳本當發生改動的時候去自動刷新應用–自動bundle，你需要在配置中增加一個入口點。

var path = require('path');module.exports = {entry: ['webpack/hot/dev-server', path.resolve(__dirname, 'app/main.js')],output: {path: path.resolve(__dirname, 'build'),filename: 'bundle.js',}, };

就是這些，現在，修改一下index.html，不需要手動build，直接刷新頁面，你可以看到新的修改頁面了。

其他：關于module pattern

Webpack 允許你使用不同的模塊模式，如AMD、CommonJS…，但是 在一個項目中，“底層”必須使用同一種實現– 只需要選擇一種模式。

ES6 模塊

比如：

import MyModule from './MyModule.js';

CommonJS

var MyModule = require('./MyModule.js');

AMD

define(['./MyModule.js'], function (MyModule) {});

理解文件路徑

一個模塊需要使用它的文件路徑來加載，看一下下面的這個結構：
/app
/modules
MyModule.js
main.js (entry point)
utils.js

打開 main.js 然后可以通過下面兩種方式引入 app/modules/MyModule.js

app/main.js

// ES6 import MyModule from './modules/MyModule.js';// CommonJS var MyModule = require('./modules/MyModule.js');

最開始的 ./ 是 “相對當前文件路徑”。
在MyModule.js中打開utils，打開 MyModule.js 然后引入 app/utils：

app/modules/MyModule.js

// ES6 相對路徑 import utils from './../utils.js';// ES6 絕對路徑 import utils from '/utils.js';// CommonJS 相對路徑 var utils = require('./../utils.js');// CommonJS 絕對路徑 var utils = require('/utils.js');

相對路徑是相對當前目錄。絕對路徑是相對入口文件，此項目中是 main.js。

我需要使用文件后綴么？

答案是：不，你不需要去特意去使用 .js。但是如果你引入之后高亮會更好。你可能有一些 .js 文件和一些 .jsx 文件，甚至一些圖片和 css 可以用 Webpack 引入，甚至可以直接引入 node_modules 里的代碼和特殊文件。
記住，Webpack 只是一個模塊合并！也就是說你可以設置他去加載任何你寫的匹配，只要有一個加載器。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的React with Webpack -1: 介绍Helloworld的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。