', {
62 | 'href': gitbook.state.basePath + '/' + item.url + '?h=' + encodeURIComponent(res.query),
63 | 'text': item.title,
64 | 'data-is-search': 1
65 | })
66 |
67 | if ($link[0].href.split('?')[0] === window.location.href.split('?')[0]) {
68 | $link[0].setAttribute('data-need-reload', 1)
69 | }
70 |
71 | var content = item.body.trim()
72 | if (content.length > MAX_DESCRIPTION_SIZE) {
73 | content = content + '...'
74 | }
75 | var $content = $('').html(content)
76 |
77 | $link.appendTo($title)
78 | $title.appendTo($li)
79 | $content.appendTo($li)
80 | $li.appendTo($searchList)
81 | })
82 | $('.body-inner').scrollTop(0)
83 | }
84 |
85 | function escapeRegExp (keyword) {
86 | // escape regexp prevserve word
87 | return String(keyword).replace(/([-.*+?^${}()|[\]/\\])/g, '\\$1')
88 | }
89 |
90 | function query (originKeyword) {
91 | if (originKeyword == null || originKeyword.trim() === '') return
92 |
93 | var results = []
94 | var index = -1
95 | for (var page in INDEX_DATA) {
96 | var store = INDEX_DATA[page]
97 | var keyword = originKeyword.toLowerCase() // ignore case
98 | var hit = false
99 | if (store.keywords && ~store.keywords.split(/\s+/).indexOf(keyword.split(':').pop())) {
100 | if (/.:./.test(keyword)) {
101 | keyword = keyword.split(':').slice(0, -1).join(':')
102 | } else {
103 | hit = true
104 | }
105 | }
106 | var keywordRe = new RegExp('(' + escapeRegExp(keyword) + ')', 'gi')
107 | if (
108 | hit || ~(index = store.body.toLowerCase().indexOf(keyword))
109 | ) {
110 | results.push({
111 | url: page,
112 | title: store.title,
113 | body: store.body.substr(Math.max(0, index - 50), MAX_DESCRIPTION_SIZE)
114 | .replace(/^[^\s,.]+./, '').replace(/(..*)[\s,.].*/, '$1') // prevent break word
115 | .replace(keywordRe, '$1 ')
116 | })
117 | }
118 | }
119 | displayResults({
120 | count: results.length,
121 | query: keyword,
122 | results: results
123 | })
124 | }
125 |
126 | function launchSearch (keyword) {
127 | // Add class for loading
128 | $body.addClass('with-search')
129 | $body.addClass('search-loading')
130 |
131 | function doSearch () {
132 | query(keyword)
133 | $body.removeClass('search-loading')
134 | }
135 |
136 | throttle(doSearch)()
137 | }
138 |
139 | function closeSearch () {
140 | $body.removeClass('with-search')
141 | $('#book-search-results').removeClass('open')
142 | }
143 |
144 | function bindSearch () {
145 | // Bind DOM
146 | var $body = $('body')
147 |
148 | // Launch query based on input content
149 | function handleUpdate () {
150 | var $searchInput = $('#book-search-input input')
151 | var keyword = $searchInput.val()
152 |
153 | if (keyword.length === 0) {
154 | closeSearch()
155 | } else {
156 | launchSearch(keyword)
157 | }
158 | }
159 |
160 | $body.on('keyup', '#book-search-input input', function (e) {
161 | if (e.keyCode === 13) {
162 | if (usePushState) {
163 | var uri = updateQueryString('q', $(this).val())
164 | window.history.pushState({
165 | path: uri
166 | }, null, uri)
167 | }
168 | }
169 | handleUpdate()
170 | })
171 |
172 | // Push to history on blur
173 | $body.on('blur', '#book-search-input input', function (e) {
174 | // Update history state
175 | if (usePushState) {
176 | var uri = updateQueryString('q', $(this).val())
177 | window.history.pushState({
178 | path: uri
179 | }, null, uri)
180 | }
181 | })
182 | }
183 |
184 | gitbook.events.on('start', function () {
185 | bindSearch()
186 | $.getJSON(state.basePath + '/search_plus_index.json').then(function (data) {
187 | INDEX_DATA = data
188 | showResult()
189 | closeSearch()
190 | })
191 | })
192 |
193 | var markConfig = {
194 | 'ignoreJoiners': true,
195 | 'acrossElements': true,
196 | 'separateWordSearch': false
197 | }
198 | // highlight
199 | var highLightPageInner = function (keyword) {
200 | var pageInner = $('.page-inner')
201 | if (/(?:(.+)?\:)(.+)/.test(keyword)) {
202 | pageInner.mark(RegExp.$1, markConfig)
203 | }
204 | pageInner.mark(keyword, markConfig)
205 |
206 | setTimeout(function () {
207 | var mark = $('mark[data-markjs="true"]')
208 | if (mark.length) {
209 | mark[0].scrollIntoView()
210 | }
211 | }, 100)
212 | }
213 |
214 | function showResult () {
215 | var keyword, type
216 | if (/\b(q|h)=([^&]+)/.test(window.location.search)) {
217 | type = RegExp.$1
218 | keyword = decodeURIComponent(RegExp.$2)
219 | if (type === 'q') {
220 | launchSearch(keyword)
221 | } else {
222 | highLightPageInner(keyword)
223 | }
224 | $('#book-search-input input').val(keyword)
225 | }
226 | }
227 |
228 | gitbook.events.on('page.change', showResult)
229 |
230 | function updateQueryString (key, value) {
231 | value = encodeURIComponent(value)
232 |
233 | var url = window.location.href.replace(/([?&])(?:q|h)=([^&]+)(&|$)/, function (all, pre, value, end) {
234 | if (end === '&') {
235 | return pre
236 | }
237 | return ''
238 | })
239 | var re = new RegExp('([?&])' + key + '=.*?(&|#|$)(.*)', 'gi')
240 | var hash
241 |
242 | if (re.test(url)) {
243 | if (typeof value !== 'undefined' && value !== null) { return url.replace(re, '$1' + key + '=' + value + '$2$3') } else {
244 | hash = url.split('#')
245 | url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, '')
246 | if (typeof hash[1] !== 'undefined' && hash[1] !== null) { url += '#' + hash[1] }
247 | return url
248 | }
249 | } else {
250 | if (typeof value !== 'undefined' && value !== null) {
251 | var separator = url.indexOf('?') !== -1 ? '&' : '?'
252 | hash = url.split('#')
253 | url = hash[0] + separator + key + '=' + value
254 | if (typeof hash[1] !== 'undefined' && hash[1] !== null) { url += '#' + hash[1] }
255 | return url
256 | } else { return url }
257 | }
258 | }
259 | window.addEventListener('click', function (e) {
260 | if (e.target.tagName === 'A' && e.target.getAttribute('data-need-reload')) {
261 | setTimeout(function () {
262 | window.location.reload()
263 | }, 100)
264 | }
265 | }, true)
266 | })
267 |
--------------------------------------------------------------------------------
/examples/book/gitbook/gitbook-plugin-sharing/buttons.js:
--------------------------------------------------------------------------------
1 | require(['gitbook', 'jquery'], function(gitbook, $) {
2 | var SITES = {
3 | 'facebook': {
4 | 'label': 'Facebook',
5 | 'icon': 'fa fa-facebook',
6 | 'onClick': function(e) {
7 | e.preventDefault();
8 | window.open('http://www.facebook.com/sharer/sharer.php?s=100&p[url]='+encodeURIComponent(location.href));
9 | }
10 | },
11 | 'twitter': {
12 | 'label': 'Twitter',
13 | 'icon': 'fa fa-twitter',
14 | 'onClick': function(e) {
15 | e.preventDefault();
16 | window.open('http://twitter.com/home?status='+encodeURIComponent(document.title+' '+location.href));
17 | }
18 | },
19 | 'google': {
20 | 'label': 'Google+',
21 | 'icon': 'fa fa-google-plus',
22 | 'onClick': function(e) {
23 | e.preventDefault();
24 | window.open('https://plus.google.com/share?url='+encodeURIComponent(location.href));
25 | }
26 | },
27 | 'weibo': {
28 | 'label': 'Weibo',
29 | 'icon': 'fa fa-weibo',
30 | 'onClick': function(e) {
31 | e.preventDefault();
32 | window.open('http://service.weibo.com/share/share.php?content=utf-8&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title));
33 | }
34 | },
35 | 'instapaper': {
36 | 'label': 'Instapaper',
37 | 'icon': 'fa fa-instapaper',
38 | 'onClick': function(e) {
39 | e.preventDefault();
40 | window.open('http://www.instapaper.com/text?u='+encodeURIComponent(location.href));
41 | }
42 | },
43 | 'vk': {
44 | 'label': 'VK',
45 | 'icon': 'fa fa-vk',
46 | 'onClick': function(e) {
47 | e.preventDefault();
48 | window.open('http://vkontakte.ru/share.php?url='+encodeURIComponent(location.href));
49 | }
50 | }
51 | };
52 |
53 |
54 |
55 | gitbook.events.bind('start', function(e, config) {
56 | var opts = config.sharing;
57 |
58 | // Create dropdown menu
59 | var menu = $.map(opts.all, function(id) {
60 | var site = SITES[id];
61 |
62 | return {
63 | text: site.label,
64 | onClick: site.onClick
65 | };
66 | });
67 |
68 | // Create main button with dropdown
69 | if (menu.length > 0) {
70 | gitbook.toolbar.createButton({
71 | icon: 'fa fa-share-alt',
72 | label: 'Share',
73 | position: 'right',
74 | dropdown: [menu]
75 | });
76 | }
77 |
78 | // Direct actions to share
79 | $.each(SITES, function(sideId, site) {
80 | if (!opts[sideId]) return;
81 |
82 | gitbook.toolbar.createButton({
83 | icon: site.icon,
84 | label: site.text,
85 | position: 'right',
86 | onClick: site.onClick
87 | });
88 | });
89 | });
90 | });
91 |
--------------------------------------------------------------------------------
/examples/book/gitbook/images/apple-touch-icon-precomposed-152.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lwdgit/gitbook-plugin-search-plus/4be5e093436adb80fbd3c95a8ebc497588ee3522/examples/book/gitbook/images/apple-touch-icon-precomposed-152.png
--------------------------------------------------------------------------------
/examples/book/gitbook/images/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lwdgit/gitbook-plugin-search-plus/4be5e093436adb80fbd3c95a8ebc497588ee3522/examples/book/gitbook/images/favicon.ico
--------------------------------------------------------------------------------
/examples/cli.js:
--------------------------------------------------------------------------------
1 | var cli = require.resolve('gitbook-cli')
2 | console.log('node ' + cli + ' ' + process.argv.slice(2).join(' '))
3 | var proc = require('child_process').exec('node ' + cli + ' ' + process.argv.slice(2).join(' '))
4 | proc.stdout.on('data', (info) => {
5 | process.stdout.write(info)
6 | })
7 | proc.stderr.on('data', (err) => {
8 | process.stdout.write(err)
9 | })
10 |
--------------------------------------------------------------------------------
/examples/content/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | gh-pages/
3 | wiki/
4 | .DS_Store
5 |
--------------------------------------------------------------------------------
/examples/content/Assets.md:
--------------------------------------------------------------------------------
1 | Historically web frontends have been split in three separate parts: structure markup (ie. HTML), style (ie. CSS) and logic (ie. JavaScript). You end up with something functional once you have these together. A well designed site should work even without JavaScript enabled and the content should make sense even without CSS. In practice this isn't always true and depending on your requirements you may be able to flex here.
2 |
3 | I won't go into detail to explain why we ended up with HTML, CSS and JavaScript. This is the triad what you'll build will most likely be using given that's what browsers support. In case of JavaScript you might compile down to something that's ES5 compatible and set up shims where needed. Shims can come in handy if you need to patch functionality for old browsers (IE 8 and such) and can help to an extent. A site such as [caniuse.com](http://caniuse.com/) can be helpful in figuring out what works and where and whether shims exist.
4 |
5 | ## CSS
6 |
7 | In its essence CSS is aspect oriented programming. It will allow you attach some behavior to selected features. Sometimes the boundary between CSS and JavaScript can be quite fuzzy and at times people have achieved amazing feats just by using CSS. That doesn't mean it should be used that way but it's always fun to push the envelope a bit.
8 |
9 | These days CSS incorporates a powerful selector syntax, media queries (customize per resolution), animation capabilities, whatnot. Depending on what you are doing you may whether love or hate its layout capabilities. Originally CSS was designed page layout in mind. These days we live more and more in the world of apps so you might need to struggle every once in a while a bit.
10 |
11 | Understanding the box model of CSS can help a lot. In addition the usage of CSS reset can be helpful. That eliminates some of the rendering differences between various browsers and provides more consistent results. In addition settings attributes such as `box-sizing: border-box;` can make the language more intuitive to use.
12 |
13 | > Instead of CSS we could be writing something like JavaScript, namely [JSS](https://en.wikipedia.org/wiki/JavaScript_Style_Sheets), if things had gone differently.
14 |
15 | ### Missing Features
16 |
17 | The core language is missing a lot of power programmers take granted. You won't have things such as variables or functions. This is the main reason why various preprocessors have appeared. They add some new functionality that has great potential to simplify your work as a developer. It isn't very [hard to write a system of your own](http://www.nixtu.info/2011/12/how-to-write-css-preprocessor-using.html). That said these days people like to stick with something like [Sass](http://sass-lang.com/), [Less](http://lesscss.org/) or [Stylus](http://learnboost.github.io/stylus/). Each to his own.
18 |
19 | Using webpack makes it easy to utilize these solutions. Often all you need to do is to set up a loader and then just `require` the assets you need. Images, fonts and such take extra setup but that's what this chapter is about so read on.
20 |
21 | ### Conventions
22 |
23 | There isn't single right way to develop CSS. As a result many approaches have appeared. Examples: [SMACSS](https://smacss.com/), [Suit CSS](http://suitcss.github.io/), [BEM](https://bem.info/).
24 |
25 | On macro level there are entire schools of design such as [Responsive Web Design](https://en.wikipedia.org/wiki/Responsive_web_design), Mobile First Design or [Atomic Web Design](http://bradfrost.com/blog/post/atomic-web-design/).
26 |
27 | With React we might be forced to rethink some of our approaches as highlighted by [a presentation by @vjeux](https://speakerdeck.com/vjeux/react-css-in-js). There are already tools such as [react-style](https://github.com/js-next/react-style) and [JSS](https://github.com/jsstyles/jss) which allow us to author CSS within components.
28 |
29 | You could say moving declarations back to markup is backwards. After all, inline styles have been frowned upon a long time. Every once in a while it is a good idea to challenge the dogma and move ahead. Maybe it can be useful to have all relevant information on component level. Even if you have basic style declarations on component level this doesn't mean you couldn't inject customizations from higher level if you design your components right.
30 |
31 | Of course there are questions such are these kind of ideas compatible with CSS frameworks such as [Bootstrap](http://getbootstrap.com/), [Foundation](http://foundation.zurb.com/) or [Pure](http://purecss.io/) but that's another topic.
32 |
33 | ## Fonts
34 |
35 | The simplest way to make your page look nicer is to set
36 |
37 | ```css
38 | body {
39 | font-family: Sans-Serif;
40 | }
41 | ```
42 |
43 | Of course CSS provides [a ton of other options](https://developer.mozilla.org/en/docs/Web/CSS/font). Even more interesting these days we have [web fonts](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face) which provide additional options for designers.
44 |
45 | ## Images
46 |
47 | A large amount of content we consume is image based. Especially thanks to the introduction of high resolution displays on mobile devices, there are additional challenges available. You could say the situation is still not ideal but we are getting there thanks to initiatives such as [Responsive Images Community Group](http://responsiveimages.org/). It will take a little bit of effort to serve the correct images for various devices but in the end if you want to provide the best service, you should go for the extra mile.
48 |
--------------------------------------------------------------------------------
/examples/content/Authoring-libraries.md:
--------------------------------------------------------------------------------
1 | Webpack can be handy for packaging your library for general consumption. You can use it to output UMD, a format that's compatible with various module loaders (CommonJS, AMD) and globals.
2 |
3 | Webpack 可以非常方便地打包和生成你的库，你可以用它输出 UMD，一种可以兼容很多模块加载器（CommonJS、AMD）和全局变量的格式。
4 |
5 | ## 如何把库输出成 UMD?
6 |
7 | Especially if you are creating a library, it can be useful to output an UMD version of your library. This can be achieved using the following snippet:
8 |
9 | 尤其是如果你创建了一个库，那么输出一个 UMD 版本是非常有用的，就像下面的片段一样实现：
10 |
11 | ```javascript
12 | output: {
13 | path: './dist',
14 | filename: 'mylibrary.js',
15 | libraryTarget: 'umd',
16 | library: 'MyLibrary',
17 | },
18 | ```
19 |
20 | In order to avoid bundling big dependencies like React, you'll want to use a configuration like this in addition:
21 |
22 | 为了避免去合并类似 React 的大型依赖，你可以使用下面这样的设置：
23 |
24 | ```javascript
25 | externals: {
26 | react: 'react',
27 | 'react/addons': 'react'
28 | },
29 | ```
30 |
31 | ## 如何输出压缩版?
32 |
33 | Here's the basic idea:
34 |
35 | 这里是一个简单的方案：
36 |
37 | ```javascript
38 | output: {
39 | path: './dist',
40 | filename: 'awesomemular.min.js',
41 | libraryTarget: 'umd',
42 | library: 'Awesomemular',
43 | },
44 | plugins: [
45 | new webpack.optimize.UglifyJsPlugin({
46 | compress: {
47 | warnings: false
48 | },
49 | }),
50 | ]
51 | ```
--------------------------------------------------------------------------------
/examples/content/Automatic-CSS-refresh.md:
--------------------------------------------------------------------------------
1 | When **webpack-dev-server** is running with [Automatic browser refresh](Automatic-browser-refresh) the CSS will also update, but a bit differently. When you do a change to a CSS file the style tag belonging to that file will be updated with the new content... without a refresh!
2 |
3 | 当 **Webpack-dev-server** 在 [浏览器自动刷新](Automatic-browser-refresh) 下运行的时候，CSS 也会自动更新，不过有点不同的是，当你改变了一个 CSS 文件，属于那个文件的标签会更新新的内容但不会刷新。
--------------------------------------------------------------------------------
/examples/content/Automatic-browser-refresh.md:
--------------------------------------------------------------------------------
1 | When **webpack-dev-server** is running it will watch your files for changes. When that happens it rebundles your project and notifies browsers listening to refresh. To trigger this behavior you need to change your *index.html* file in the `build/` folder.
2 |
3 |
4 | 当运行 **webpack-dev-server** 的时候，它会监听你的文件修改。当项目重新合并之后，会通知浏览器刷新。为了能够触发这样的行为，你需要把你的 *index.html* 放到 `build/` 文件夹下，然后做这样的修改：
5 |
6 | **build/index.html**
7 |
8 | ```html
9 |
10 |
11 |
12 | Hello world ;
19 | }
20 | }
21 | ```
22 |
23 | **main.js**
24 |
25 | ```javascript
26 | import React from 'react';
27 | import Hello from './component.jsx';
28 |
29 | main();
30 |
31 | function main() {
32 | React.render(
46 |
47 |
48 |
49 |
50 |
51 | ```
52 |
53 | ## 转换 JSX
54 |
55 | To use the JSX syntax you will need webpack to transform your JavaScript. This is the job of a loader. We'll use [Babel](https://babeljs.io/) as it's nice and has plenty of features.
56 |
57 | 为了能够使用 JSX 语法，你需要用 Webpack 来转码你的 JavaScript，这是加载器的工作，我们可以使用一个很好用也有很多功能的 [Babel](https://babeljs.io/)。
58 |
59 | `npm install babel-loader babel-core --save-dev`
60 |
61 | Now we have to configure webpack to use this loader.
62 |
63 | 现在我们需要去配置 Webpack 来使用加载器。
64 |
65 | *webpack.config.js*
66 | ```javascript
67 | var path = require('path');
68 | var config = {
69 | entry: path.resolve(__dirname, 'app/main.js'),
70 | output: {
71 | path: path.resolve(__dirname, 'build'),
72 | filename: 'bundle.js'
73 | },
74 | module: {
75 | loaders: [{
76 | test: /\.jsx?$/, // 用正则来匹配文件路径，这段意思是匹配 js 或者 jsx
77 | loader: 'babel' // 加载模块 "babel" 是 "babel-loader" 的缩写
78 | }]
79 | }
80 | };
81 |
82 | module.exports = config;
83 | ```
84 |
85 | Webpack will test each path required in your code. In this project we are using ES6 module loader syntax, which means that the require path of `import MyComponent from './Component.jsx';` is `'./Component.jsx'`.
86 |
87 | Webpack 会在你的项目中测试所有路径，如果我们项目中使用 ES6 模块加载器语法，比如 `import MyComponent from './Component.jsx';` 是会去匹配 `'./Component.jsx'`。
88 |
89 | Run `npm run dev` in the console and refresh the page to see something.
90 |
91 | 在命令行中运行 `npm run dev`，然后刷新页面就可以看到修改。
--------------------------------------------------------------------------------
/examples/content/Creating-a-dev-and-production-config.md:
--------------------------------------------------------------------------------
1 | - Split configuration into two files
--------------------------------------------------------------------------------
/examples/content/Custom-workflow-entry.md:
--------------------------------------------------------------------------------
1 | When running your workflow from **http://localhost:8080/web-dev-server/bundle** you do not control the *index.html* file where the scripts are loaded.
2 |
3 | ## Running your own index.html file
4 | In your *package.json* you have your *dev* script. `"webpack-dev-server --devtool eval --progress --colors --content-base build/"`. The *--content-base build/* parameter tells webpack-dev-server where to load your application from. In this example that would be `build/`.
5 |
6 | ## Create the index.html file
7 | In the `build/` folder create a new *index.html* with this content.
--------------------------------------------------------------------------------
/examples/content/Getting-started.md:
--------------------------------------------------------------------------------
1 | > Before getting started you should make sure you have a recent version of Node.js and NPM installed. See [nodejs.org](http://nodejs.org/) for installation details. We'll use NPM to set up various tools.
2 |
3 | > 在开始之前，你需要把你的 Node.js 和 NPM 都更新到最新的版本。访问 [nodejs.org](http://nodejs.org/) 查看安装详情。我们将会使用 NPM 安装一些工具。
4 |
5 | Getting started with Webpack is straightforward. I'll show you how to set up a simple project based on it. As a first step, set a directory for your project and hit `npm init` and fill in some answers. That will create a `package.json` for you. Don't worry if some fields don't look ok, you can modify those later.
6 |
7 | 开始使用 Webpack 非常简单，我会展示给你看使用它的一个简单的项目。第一步，为你的项目新建一个文件夹，然后输入 `npm init`，然后填写相关问题。这样会为你创建了 `package.json`，不用担心填错，你可以之后修改它。
8 |
9 | ## 安装 Webpack
10 |
11 | Next you should get Webpack installed. We'll do a local install and save it as a project dependency. This way you can invoke the build anywhere (build server, whatnot). Run `npm i webpack --save-dev`. If you want to run the tool, hit `node_modules/.bin/webpack`.
12 |
13 | 接下来我们安装 Webpack，我们要把它安装在本地，然后把它作为项目依赖保存下来。这样你可以在任何地方编译（服务端编译之类的）。输入 `npm i webpack --save-dev`。如果你想运行它，就输入 `node_modules/.bin/webpack`。
14 |
15 | ## 目录结构
16 |
17 | Structure your project like this:
18 |
19 | 项目的目录结构长这样：
20 |
21 | - /app
22 | - main.js
23 | - component.js
24 | - /build
25 | - bundle.js (自动创建)
26 | - index.html
27 | - package.json
28 | - webpack.config.js
29 |
30 | In this case we'll create `bundle.js` using Webpack based on our `/app`. To make this possible, let's set up `webpack.config.js`.
31 |
32 | 我们会使用 Webpack 在我们的 `/app` 里来自动创建 `bundle.js` 。接下来，我们来设置 `webpack.config.js`。
33 |
34 | ## 设置 Webpack
35 |
36 | Webpack 的配置文件长这样：
37 |
38 | *webpack.config.js*
39 |
40 | ```javascript
41 | var path = require('path');
42 |
43 |
44 | module.exports = {
45 | entry: path.resolve(__dirname, 'app/main.js'),
46 | output: {
47 | path: path.resolve(__dirname, 'build'),
48 | filename: 'bundle.js',
49 | },
50 | };
51 | ```
52 |
53 | ## 运行你的第一个编译
54 |
55 | Now that we have basic configuration in place, we'll need something to build. Let's start with a classic `Hello World` type of app. Set up `/app` like this:
56 |
57 | 现在我们有了一个最简单的配置，我们需要有什么东西去编译，让我们开始一个经典的 `Hello World`，设置 `/app` 像这样：
58 |
59 | *app/component.js*
60 |
61 | ```javascript
62 | 'use strict';
63 |
64 |
65 | module.exports = function () {
66 | var element = document.createElement('h1');
67 |
68 | element.innerHTML = 'Hello world';
69 |
70 | return element;
71 | };
72 | ```
73 |
74 | *app/main.js*
75 |
76 | ```javascript
77 | 'use strict';
78 | var component = require('./component.js');
79 |
80 |
81 | document.body.appendChild(component());
82 |
83 | ```
84 |
85 | Now run `webpack` in your terminal and your application will be built. A *bundle.js* file will appear in your `/build` folder. Your *index.html* file in the `build/` folder will need to load up the application.
86 |
87 | 现在在你的命令行运行 `webpack`，然后你的应用会开始编译，一个 `bundle.js` 文件就这样出现在你的 `/build` 文件夹下，需要在 `build/` 下的 *index.html* 去启动项目。
88 |
89 | *build/index.html*
90 |
91 | ```html
92 |
93 |
94 |
95 | {todoItems.map((todoItem, i) =>
50 |
52 | ```
53 | You probably noticed something special here. What is that `key` property about? It is something that tells React the exact ordering of your items. If you don't provide unique keys for list items like this, React will warn you as it won't be able to guarantee the correct ordering otherwise.
54 |
55 | 你可能注意到这里有些特殊的地方，什么是 `key` 属性？这是告诉 React 这个项的准确顺序。如果你不需要像这样需要提供列表项的唯一 Key 的话，否则 React 会警告你这样它没办法保证是正确的顺序。
56 |
57 | This has to do with the fact that React actually implements something known as Virtual DOM (VDOM for short) on top of actual DOM. It is a subset of DOM that allows React to optimize its rendering. The primary advantage of this approach is that it allows React to eschew a lot of legacy our good old DOM has gained through years. This is the secret to React's high performance.
58 |
59 | 需要了解的事实是 React 实际上在真实 DOM 上实现了虚拟 DOM（简称 VDOM），这是一个 DOM 的子集，能够让 React 能够优化它的渲染。这个优化的方法是它让 React 能够避开困恼我们多年的 DOM 性能损耗。这就是 React 高性能的原因。
60 |
61 | ### 整体组件
62 |
63 | To give you a better idea of what components look like, let's expand our `TodoItem` example into code (ES6 + JSX). I've done this below and will walk you through it:
64 |
65 | 为了能够让你更加清楚组件长什么样子，让我们拓展 `TodoItem` 例子来感受一下（ES6 + JSX），我已经搞完了，然后我们来过一遍看看：
66 |
67 | ```javascript
68 | var React = require('react');
69 |
70 |
71 | module.exports = React.createClass({
72 | getInitialState() {
73 | return {
74 | // 让我们保持追踪看看我们给项点了多少次赞
75 | likes: 0,
76 | };
77 | },
78 | render() {
79 | var owner = this.props.owner;
80 | var task = this.props.task;
81 | var likes = this.state.likes;
82 |
83 | return
84 | {owner}
85 | {task}
86 | {likes}
87 | Like
88 |
;
89 | },
90 | like() {
91 | this.setState({
92 | likes: this.state.likes + 1
93 | });
94 | },
95 | });
96 | ```
97 |
98 | You can see some basic features of a React component above. First we create a class for our component. After that we define some initial state for it, then we render and finally we define some custom callbacks for our handlers if they exist. In this case I decided to implement an extra feature, liking. The current implementation just keeps track of the amount of likes per component.
99 |
100 | 你可以在上面看到一些基础的 React 组件的功能，一开始我们创建了一个组件的类，然后我们在初始化的时候定义一些状态，然后我们渲染，最后我们定制了一些回调。在这个例子中，我决定去实施一个额外的功能，点赞。这个工作只是保持了一个跟踪点赞组件的计数。
101 |
102 | In practice you would transmit like amounts to a backend and add some validation there but this is a good starting point for understanding how state works in React.
103 |
104 | 在实践中，你需要把点赞计数传输给后端，然后添加一些验证，不过目前这个阶段对于理解 State 在 React 中的是如何使用的已经是一个非常好的开端了。
105 |
106 | `getInitialState` and `render` are a part of a [React component's lifecycle as documented officially](http://facebook.github.io/react/docs/component-specs.html). There are additional hooks that allow you to do things like set up adapters for `jQuery` plugins and such.
107 |
108 | `getInitialState` 和 `render` 是 [React 组件的生命周期官方文档](http://facebook.github.io/react/docs/component-specs.html) 的一部分。也有额外的能够让你去设置加载 `jQuery` 插件之类的适配器的钩子。
109 |
110 | In this example CSS naming has been modeled after [Suit CSS](http://suitcss.github.io/) conventions as those look clean to me. That's just one way to deal with it.
111 |
112 | 在例子中的 CSS 的命名是根据 [Suit CSS](http://suitcss.github.io/) 约定处理后的，这样对我来说看起来非常干净，这只是一种解决方案而已。
113 |
114 | ### 处理操作
115 |
116 | Let's say we want to modify the owner of our TodoItems. For the sake of simplicity let's expect it's just a string and owner is the same for all TodoItems. Based on this design it would make sense to have an input for owner at our user interface. A naive implementation would look something like this:
117 |
118 | 让我们来开始修改我们的 TodoItems 的 owner，为了简化这个目的，我们假设 owner 只是一个字符串而且只有一个，基于这个设计，在用户界面里增加一个输入框给用户来修改用户名，改动是这样的：
119 |
120 | ```javascript
121 | var React = require('react');
122 | var TodoItem = require('./TodoItem.jsx');
123 |
124 |
125 | module.exports = React.createClass({
126 | getInitialState() {
127 | return {
128 | todoItems: [
129 | {
130 | task: 'Learn React',
131 | },
132 | {
133 | task: 'Learn Webpack',
134 | },
135 | {
136 | task: 'Conquer World',
137 | }
138 | ],
139 | owner: 'John Doe',
140 | };
141 | },
142 |
143 | render() {
144 | var todoItems = this.state.todoItems;
145 | var owner = this.state.owner;
146 |
147 | return
148 |
149 |
151 |
152 |
153 |
{todoItems.map((todoItem, i) =>
154 |
155 |
157 | )}
158 |
159 |
199 |
200 |
202 |
203 |
204 |
{todoItems.map((todoItem, i) =>
205 |
206 |
208 | )}
209 |
210 |
, document.body);
21 | ```
22 |
23 | *router.js (server)*
24 | ```javascript
25 | var React = require('react');
26 | var App = require('./App.js');
27 | var AppState = require('./server/AppState.js');
28 | var index = '{{component}}';
29 |
30 | app.get('/', function (req, res) {
31 | var componentHtml = React.renderToString(App({state: AppState}));
32 | var html = index.replace('{{component}}', componentHtml);
33 | res.type('html');
34 | res.send(html);
35 | });
36 | ```
37 |
38 | So this was a very naive and simple way of showing it, but what you should notice here is that we use the same **App.js** file on the client and server, but we have two different ways of producing the state.
39 |
40 | 所以这是一个非常初级且简单的例子来展示它，不过你需要注意的是我们在客户端和服务端使用了同一个 **App.js**，但是我们需要两种方式来提供状态。
--------------------------------------------------------------------------------
/examples/content/Javascript-next.md:
--------------------------------------------------------------------------------
1 | ## 类
2 |
3 | As of React JS 0.13 you will be able to define components as classes.
4 |
5 | 在 React JS 0.13 中，你可以把组件定义为类。
6 |
7 | ```javascript
8 | class MyComponent extends React.Component {
9 | constructor() {
10 | this.state = {message: 'Hello world'};
11 | }
12 | render() {
13 | return (
14 | {this.state.message}
15 | );
16 | }
17 | }
18 | ```
19 |
20 | This gives you a very short and nice syntax for defining components. A drawback with using classes though is the lack of mixins. That said, you are not totally lost. Lets us see how we could still use the important **PureRenderMixin**.
21 |
22 | 这样能够写出非常短且优雅的语法来定义组件。使用类的缺点是缺乏了很多 mixin，不过，不是所有的不能用，让我们来看看使用重要的 **PureRenderMixin**：
23 |
24 | ```javascript
25 | import React from 'react/addons';
26 |
27 | class Component extends React.Component {
28 | shouldComponentUpdate() {
29 | return React.addons.PureRenderMixin.shouldComponentUpdate.apply(this, arguments);
30 | }
31 | }
32 |
33 | class MyComponent extends Component {
34 | constructor() {
35 | this.state = {message: 'Hello world'};
36 | }
37 | render() {
38 | return (
39 | {this.state.message}
40 | );
41 | }
42 | }
43 | ```
--------------------------------------------------------------------------------
/examples/content/Lazy-loaded-entry-points.md:
--------------------------------------------------------------------------------
1 | It is also possible to lazy load entry points. This means that you load parts of your application as they are requested. A typical scenario for this would be that your users only visits specific parts of the application. And an example of that would be twitter.com. You do not always visit your profile page, so why load the code for that? Here is a summary of requirements:
2 |
3 | Webpack 也可以实现懒加载入口文件，意味着应用的一部分只在需要的时候加载，一个典型的例子是用户只有访问一些应用特定的部分，典型的例子是 Twitter.com，你不会一直访问你的个人页，所以为什么要加载那部分的代码？这里有个主要的要求：
4 |
5 | - You have a relatively big application where users can visit different parts of it
6 | - You do care a lot about initial render time
7 |
8 |
9 | - 你有一个相对比较大的应用，可以让用户可以访问应用的不同部分。
10 | - 你非常关注初始渲染时间
11 |
12 |
13 | *webpack.production.config.js*
14 | ```javascript
15 | var path = require('path');
16 | var webpack = require('webpack');
17 | var node_modules_dir = path.resolve(__dirname, 'node_modules');
18 |
19 | var config = {
20 | entry: {
21 | app: path.resolve(__dirname, 'app/main.js'),
22 | vendors: ['react']
23 | },
24 | output: {
25 | path: path.resolve(__dirname, 'dist'),
26 | filename: 'app.js'
27 | },
28 | module: {
29 | loaders: [{
30 | test: /\.js$/,
31 | exclude: [node_modules_dir],
32 | loader: 'babel'
33 | }]
34 | },
35 | plugins: [
36 | new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')
37 | ]
38 | };
39 |
40 | module.exports = config;
41 | ```
42 | So we are pretty much back where we started with a split application and vendors bundle. You do not really define your lazy dependencies in a configuration, Webpack automatically understands them when analyzing your code. So let us see how we would lazy load a **profile page**:
43 |
44 | 所以我们把应用和第三方分离是一件非常漂亮的事，你不需要在配置中设置懒加载依赖，Webpack 会自动理解他们，然后分析你的代码。所以让我们看看我们是如何加载一个 **个人信息页**：
45 |
46 | *main.js (使用 ES6 语法)*
47 | ```javascript
48 | import React from 'react';
49 | import Feed from './Feed.js';
50 |
51 | class App extends React.Component {
52 | constructor() {
53 | this.state = { currentComponent: Feed };
54 | }
55 | openProfile() {
56 | require.ensure([], () => {
57 | var Profile = require('./Profile.js');
58 | this.setState({
59 | currentComponent: Profile
60 | });
61 | });
62 | }
63 | render() {
64 | return (
65 | return {this.state.currentComponent()}
66 | );
67 | }
68 | }
69 | React.render(Hello world!
68 | }
69 | });
70 | ```
71 |
72 | **Note!** You can of course do this with both CommonJS and AMD.
73 |
74 | **注意！** 你也可以在 CommonJS 和 AMD 中做同样的事情。
75 |
76 | ## CSS 加载策略
77 |
78 | Depending on your application you might consider three main strategies. In addition to this you should consider including some of your basic CSS inlined with the initial payload (index.html). This will set the structure and maybe a loader while the rest of your application is downloading and executing.
79 |
80 | 根据你的应用，你可能会考略三种策略。另外，你需要考虑把一些基础的 CSS 内联到初始容器中（index.html），这样设置的结构能够在应用下载和执行的时候加载剩下的应用。
81 |
82 | ### 所有合并成一个
83 |
84 | In your main entry point, e.g. `app/main.js` you can load up your entire CSS for the whole project:
85 |
86 | 在你的主入口文件中个，比如 `app/main.js` 你可以为整个项目加载所有的 CSS：
87 |
88 |
89 | **app/main.js**
90 |
91 |
92 | ```javascript
93 | import './project-styles.css';
94 | // 其他 JS 代码
95 | ```
96 |
97 | The CSS is included in the application bundle and does not need to download.
98 |
99 |
100 | CSS 就完全包含在合并的应用中，再也不需要重新下载。
101 |
102 |
103 | ### 懒加载
104 |
105 | If you take advantage of lazy loading by having multiple entry points to your application, you can include specific CSS for each of those entry points:
106 |
107 | 如果你想发挥应用中多重入口文件的优势，你可以在每个入口点包含各自的 CSS：
108 |
109 |
110 | **app/main.js**
111 |
112 | ```javascript
113 | import './style.css';
114 | // 其他 JS 代码
115 | ```
116 |
117 | **app/entryA/main.js**
118 |
119 | ```javascript
120 | import './style.css';
121 | // 其他 JS 代码
122 | ```
123 |
124 | **app/entryB/main.js**
125 |
126 | ```javascript
127 | import './style.css';
128 | // 其他 JS 代码
129 | ```
130 |
131 | You divide your modules by folders and include both CSS and JavaScript files in those folders. Again, the imported CSS is included in each entry bundle when running in production.
132 |
133 | 你把你的模块用文件夹分离，每个文件夹有各自的 CSS 和 JavaScript 文件。再次，当应用发布的时候，导入的 CSS 已经加载到每个入口文件中。
134 |
135 | ### 制定的组件
136 |
137 | With this strategy you create a CSS file for each component. It is common to namespace the CSS classes with the component name, thus avoiding some class of one component interfering with the class of an other.
138 |
139 | 你可以根据这个策略为每个组件创建 CSS 文件，可以让组件名和 CSS 中的 class 使用一个命名空间，来避免一个组件中的一些 class 干扰到另外一些组件的 class。
140 |
141 |
142 | **app/components/MyComponent.css**
143 |
144 | ```css
145 | .MyComponent-wrapper {
146 | background-color: #EEE;
147 | }
148 | ```
149 |
150 | **app/components/MyComponent.jsx**
151 |
152 | ```
153 | import './MyComponent.css';
154 | import React from 'react';
155 |
156 | export default React.createClass({
157 | render: function () {
158 | return (
159 |
160 |
Hello world
161 |
162 | )
163 | }
164 | });
165 | ```
166 |
167 | ## 使用内联样式取代 CSS 文件
168 |
169 | With "React Native" you do not use stylesheets at all, you only use the *style-attribute*. By defining your CSS as objects. Depending on your project, you might consider this as your CSS strategy.
170 |
171 | 在 “React Native” 中你不再需要使用任何 CSS 文件，你只需要使用 *style 属性*，可以把你的 CSS 定义成一个对象，那样就可以根据你的项目重新来考略你的 CSS 策略。
172 |
173 |
174 | **app/components/MyComponent.jsx**
175 |
176 |
177 | ```javascript
178 | import React from 'react';
179 |
180 | var style = {
181 | backgroundColor: '#EEE'
182 | };
183 |
184 | export default React.createClass({
185 | render: function () {
186 | return (
187 |
188 |
Hello world
189 |
190 | )
191 | }
192 | });
193 | ```
194 |
--------------------------------------------------------------------------------
/examples/content/Loading-LESS-or-SASS.md:
--------------------------------------------------------------------------------
1 | If you want to use compiled CSS, there are two loaders available for you. The **less-loader** and the **sass-loader**. Depending on your preference, this is how you set it up.
2 |
3 | 如果你想使用编译 CSS，这里有两种可用的加载器：**less-loader** 和 **sass-loader**，看你喜欢哪种。下面是如何设置。
4 |
5 | ## 安装和设置加载器
6 | `npm install less-loader` or `npm install sass-loader`.
7 |
8 | `npm install less-loader` 或者 `npm install sass-loader`.
9 |
10 |
11 | **webpack.config.js**
12 |
13 |
14 | ```javascript
15 | var path = require('path');
16 | var config = {
17 | entry: path.resolve(__dirname, 'app/main.js')
18 | output: {
19 | path: path.resolve(__dirname, 'build'),
20 | filename: 'bundle.js'
21 | },
22 | module: {
23 | loaders: [{
24 | test: /\.jsx$/,
25 | loader: 'babel'
26 | },
27 |
28 | // LESS
29 | {
30 | test: /\.less$/,
31 | loader: 'style!css!less'
32 | },
33 |
34 | // SASS
35 | {
36 | test: /\.scss$/,
37 | loader: 'style!css!sass'
38 | }]
39 | }
40 | };
41 | ```
42 |
43 | ## LESS 和 SASS 中的 imports 怎么办?
44 | If you import one LESS/SASS file from an other, use the exact same pattern as anywhere else. Webpack will dig into these files and figure out the dependencies.
45 |
46 | 如果你从另外一个文件中导入一个 LESS/SASS 文件，像其他地方一样使用准确的路径，Webpack 会找出那些文件，然后识别里面的依赖。
47 |
48 | ```less
49 | @import "./variables.less";
50 | ```
51 |
52 | You can also load LESS files directly from your node_modules directory.
53 |
54 | 你也可以直接从你的 node_modules 文件夹中加载 LESS 文件。
55 |
56 | ```less
57 | $import "~bootstrap/less/bootstrap";
58 | ```
59 |
60 |
--------------------------------------------------------------------------------
/examples/content/Loading-SVG.md:
--------------------------------------------------------------------------------
1 | Webpack has a [few ways](https://github.com/webpack/webpack/issues/595) to load SVG. However the simplest way is through **file-loader**.
2 |
3 | ## Installation and configuration
4 |
5 | Install the loader: `npm install file-loader --save-dev`.
6 |
7 | In the webpack config file you can add the following loader configuration:
8 |
9 | **webpack.config.js**
10 |
11 | ```javascript
12 | var path = require('path');
13 | var config = {
14 | entry: path.resolve(__dirname, 'app/main.js')
15 | output: {
16 | path: path.resolve(__dirname, 'build'),
17 | filename: 'bundle.js'
18 | },
19 | module: {
20 | loaders: [{
21 | test: /\.jsx$/,
22 | loader: 'babel'
23 | }, {
24 | test: /\.svg$/,
25 | loader: 'file-loader'
26 | }]
27 | }
28 | };
29 | ```
30 |
31 | Then in your CSS:
32 |
33 | ```css
34 | .icon {
35 | background-image: url(../assets/icon.svg);
36 | }
37 | ```
38 |
39 | In this example the `assets` folder is relative to your CSS file.
40 |
41 | For SVG compression check out the [svgo-loader](https://github.com/pozadi/svgo-loader).
--------------------------------------------------------------------------------
/examples/content/Matchers.md:
--------------------------------------------------------------------------------
1 | ## 我可以使用哪种匹配器?
2 |
3 | * `{ test: /\.js$/, loader: 'babel-loader' }` - Matches just .js
4 | * `{ test: /\.(js|jsx)$/, loader: 'babel-loader' }` - Matches both js and jsx
5 | * Generally put it's just a JavaScript regex so standard tricks apply
6 |
7 |
8 | * `{ test: /\.js$/, loader: 'babel-loader' }` - 只匹配 .js
9 | * `{ test: /\.(js|jsx)$/, loader: 'babel-loader' }` - 匹配 js 和 jsx
10 | * 一般来说它就是一段 JavaScript 的正则，所以按照标准来即可
--------------------------------------------------------------------------------
/examples/content/Multiple-entry-points.md:
--------------------------------------------------------------------------------
1 | Maybe you are building an application that has multiple urls. An example of this would be a solution where you have two, or more, different URLs responding with different pages. Maybe you have one user page and one admin page. They both share a lot of code, but you do not want to load all the admin stuff for normal users. That is a good scenario for using multiple entry points. A list of use cases could be:
2 |
3 | 你的应用可能有多个路径， 就是应用中有两个或者多个 URL 相应不同的页面，这里就是提供这样的解决方案。可能你有一个普通用户页和一个管理员页，他们共享了很多代码，但是不想在普通用户页中加载所有管理员页的代码，所以好方案是使用多重入口。使用缘由有下面几条：
4 |
5 | - You have an application with multiple isolated user experiences, but they share a lot of code
6 | - You have a mobile version using less components
7 | - You have a typical user/admin application where you do not want to load all the admin code for a normal user
8 |
9 |
10 | - 你的应用有多种不同的用户体验，但是他们共享了很多代码。
11 | - 你有一个使用更少组件的手机版本
12 | - 你的应用是典型的权限控制，你不想为普通用户加载所有管理用户的代码。
13 |
14 | Let us create an example with a mobile experience using less components:
15 |
16 | 让我们创建一个使用更少组件的手机页面的例子：
17 |
18 | *webpack.production.config.js*
19 | ```javascript
20 | var path = require('path');
21 | var webpack = require('webpack');
22 | var node_modules_dir = path.resolve(__dirname, 'node_modules');
23 |
24 | var config = {
25 | entry: {
26 | app: path.resolve(__dirname, 'app/main.js'),
27 | mobile: path.resolve(__dirname, 'app/mobile.js'),
28 | vendors: ['react'] // 其他库
29 | },
30 | output: {
31 | path: path.resolve(__dirname, 'dist'),
32 | filename: '[name].js' // 注意我们使用了变量
33 | },
34 | module: {
35 | loaders: [{
36 | test: /\.js$/,
37 | exclude: [node_modules_dir],
38 | loader: 'babel'
39 | }]
40 | },
41 | plugins: [
42 | new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')
43 | ]
44 | };
45 |
46 | module.exports = config;
47 | ```
48 | This configuration will create three files in the `dist/` folder. **app.js**, **mobile.js** and **vendors.js**. Most of the code in the **mobile.js** file also exists in **app.js**, but that is what we want. We will never load **app.js** and **mobile.js** on the same page.
49 |
50 | 这个配置会在 `dist/` 文件夹下创建三个文件：**app.js**、**mobile.js**和**vendors.js**，大部分的代码在**mobile.js**文件中，也有一部分在 **app.js** 中，不过这是我们需要的，我们不会在同一个页面中同时加载 **app.js** 和 **mobile.js**。
--------------------------------------------------------------------------------
/examples/content/Navigation.md:
--------------------------------------------------------------------------------
1 | 1. [something](/christianalfoni/react-webpack-cookbook/wiki/02.-Why-Webpack-and-React-JS%3F)
--------------------------------------------------------------------------------
/examples/content/Optimizing-caching.md:
--------------------------------------------------------------------------------
1 | When users hit the URL of your application they will need to download different assets. CSS, JavaScript, HTML, images and fonts. The great thing about Webpack is that you can stop thinking how you should download all these assets. You can do it through JavaScript.
2 |
3 | 当用户输入你应用的地址的时候，他们需要去下载不同的资源，比如 CSS、JavaScript、HTML、图片和字体。不过 Webpack 做了一件事情，让你不用去考虑如何不用下载全部资源。
4 |
5 | > OccurenceOrderPlugin
6 |
7 |
8 | ## 如何让生产输出附上哈希值？
9 |
10 | * Use `[hash]`. Example: `'assets/bundle.[hash].js'`
11 | * 使用 `[hash]`。比如：`'assets/bundle.[hash].js'`
12 |
13 | The benefit of this is that this will force the client to reload the file. There is more information about `[hash]` at [the long term caching](http://webpack.github.io/docs/long-term-caching.html) section of the official documentation.
14 |
15 | 这个的好处是能够让客户端强制重新加载这个文件，可以在 [the long term caching](http://webpack.github.io/docs/long-term-caching.html) 了解更多关于 `[hash]`，
16 |
17 | > Is it possible to change the hash only if bundle changed?
18 | > 有可能只有合并文件变化了才会修改哈希值么？
--------------------------------------------------------------------------------
/examples/content/Optimizing-development.md:
--------------------------------------------------------------------------------
1 | We talked about how you could use the minified versions of your dependencies in development to make the rebundling go as fast as possible. Let us look at a small helper you can implement to make this a bit easier to handle.
2 |
3 | 之前介绍了如何在开发中使用依赖的压缩版本来让合并尽可能加速，让我们看一下这个小的例子来让你更加轻松去处理：
4 |
5 | *webpack.config.js*
6 | ```javascript
7 | var webpack = require('webpack');
8 | var path = require('path');
9 | var node_modules_dir = path.join(__dirname, 'node_modules');
10 |
11 | var deps = [
12 | 'react/dist/react.min.js',
13 | 'react-router/dist/react-router.min.js',
14 | 'moment/min/moment.min.js',
15 | 'underscore/underscore-min.js',
16 | ];
17 |
18 | var config = {
19 | entry: ['webpack/hot/dev-server', './app/main.js'],
20 | output: {
21 | path: path.resolve(__dirname, './build'),
22 | filename: 'bundle.js'
23 | },
24 | resolve: {
25 | alias: {}
26 | },
27 | module: {
28 | noParse: [],
29 | loaders: []
30 | }
31 | };
32 |
33 | // Run through deps and extract the first part of the path,
34 | // as that is what you use to require the actual node modules
35 | // in your code. Then use the complete path to point to the correct
36 | // file and make sure webpack does not try to parse it
37 | // 通过在第一部分路径的依赖和解压
38 | // 就是你像引用 node 模块一样引入到你的代码中
39 | // 然后使用完整路径指向当前文件，然后确认 Webpack 不会尝试去解析它
40 |
41 | deps.forEach(function (dep) {
42 | var depPath = path.resolve(node_modules_dir, dep);
43 | config.resolve.alias[dep.split(path.sep)[0]] = depPath;
44 | config.module.noParse.push(depPath);
45 | });
46 |
47 | module.exports = config;
48 | ```
49 | Not all modules include a minified distributed version of the lib, but most do. Especially with large libraries like React JS you will get a significant improvement.
50 |
51 | 不是所有的模块需要一个压缩的版本，不过大多数需要，尤其是像 React JS 这种大型库，之后你会有明显的提升。
52 |
53 | ## 把 React 暴露到全局中
54 | You might be using distributed versions that requires React JS on the global scope. To fix that you can install the expose-loader by `npm install expose-loader --save-dev` and set up the following config, focusing on the *module* property:
55 |
56 | 你可能在全局中使用了一个压缩版本的 React，为了修复你可以安装这个暴露全局加载器 `npm install expose-loader --save-dev`，然后像下面这样配置，注意 *module* 属性：
57 |
58 | ```javascript
59 | var webpack = require('webpack');
60 | var path = require('path');
61 | var node_modules_dir = path.join(__dirname, 'node_modules');
62 |
63 | var deps = [
64 | 'react/dist/react.min.js',
65 | 'react-router/dist/react-router.min.js',
66 | 'moment/min/moment.min.js',
67 | 'underscore/underscore-min.js',
68 | ];
69 |
70 | var config = {
71 | entry: ['webpack/hot/dev-server', './app/main.js'],
72 | output: {
73 | path: path.resolve(__dirname, './build'),
74 | filename: 'bundle.js'
75 | },
76 | resolve: {
77 | alias: {}
78 | },
79 | module: {
80 | noParse: [],
81 |
82 | // Use the expose loader to expose the minified React JS
83 | // distribution. For example react-router requires this
84 | // 使用暴露全局加载器来暴露压缩版的 React JS，比如 react-router 需要这个。
85 | loaders: [{
86 | test: path.resolve(node_modules_dir, deps[0]),
87 | loader: "expose?React"
88 | }]
89 | }
90 | };
91 |
92 | deps.forEach(function (dep) {
93 | var depPath = path.resolve(node_modules_dir, dep);
94 | config.resolve.alias[dep.split(path.sep)[0]] = depPath;
95 | config.module.noParse.push(depPath);
96 | });
97 |
98 | module.exports = config;
99 | ```
--------------------------------------------------------------------------------
/examples/content/Optimizing-rebundling.md:
--------------------------------------------------------------------------------
1 | You might notice after requiring React JS into your project that the time it takes from a save to a finished rebundle of your application takes more time. In development you ideally want from 200-800 ms rebundle speed, depending on what part of the application you are working on.
2 |
3 | 你可能注意到在引入 React JS 到你的项目之后，给你的应用重新合并会花费太多的时间。在开发环境中，最理想的是编译最多 200 到 800 毫秒的速度，取决于你在开发的应用。
4 |
5 | > IMPORTANT! This setup a minified, production version of React. As a result you will lose `propTypes` based type validation!
6 |
7 | > 注意！这个是设置一个压缩和发布的 React 版本，结果你可能会失去 `propTypes` 基础类型检查！
8 |
9 | ## 在开发环境中使用压缩文件
10 |
11 | Instead of making Webpack go through React JS and all its dependencies, you can override the behavior in development.
12 |
13 | 为了不让 Webpack 去遍历 React JS 及其所有依赖，你可以在开发中重写它的行为。
14 |
15 | **webpack.config.js**
16 |
17 | ```javascript
18 | var path = require('path');
19 | var node_modules = path.resolve(__dirname, 'node_modules');
20 | var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');
21 |
22 | config = {
23 | entry: ['webpack/hot/dev-server', path.resolve(__dirname, 'app/main.js')],
24 | resolve: {
25 | alias: {
26 | 'react': pathToReact
27 | }
28 | },
29 | output: {
30 | path: path.resolve(__dirname, 'build'),
31 | filename: 'bundle.js',
32 | },
33 | module: {
34 | loaders: [{
35 | test: /\.jsx?$/,
36 | loader: 'babel'
37 | }],
38 | noParse: [pathToReact]
39 | }
40 | };
41 |
42 | module.exports = config;
43 | ```
44 |
45 | We do two things in this configuration:
46 |
47 | 我们在配置中做了两件事：
48 |
49 | 1. Whenever "react" is required in the code it will fetch the minified React JS file instead of going to *node_modules*
50 |
51 | 2. Whenever Webpack tries to parse the minified file, we stop it, as it is not necessary
52 |
53 |
54 |
55 | 1. 每当 "react" 在代码中被引入，它会使用压缩后的 React JS 文件，而不是到 *node_modules* 中找。
56 | 2. 每当 Webpack 尝试去解析那个压缩后的文件，我们阻止它，因为这不必要。
57 |
58 | Take a look at [Optimizing development](Optimizing-development) for more information on this.
59 |
60 | 可以到 [优化开发](Optimizing-development) 看到更多这方面的信息。
61 |
--------------------------------------------------------------------------------
/examples/content/Optimizing-workflow.md:
--------------------------------------------------------------------------------
1 | - Using bower files with noparse to improve rebundle speed
--------------------------------------------------------------------------------
/examples/content/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | search:
3 | keywords: ['readme', 'meta']
4 | ---
5 |
6 |
7 | [Gitbook 英文原版](http://christianalfoni.github.io/react-webpack-cookbook/)
8 | =======
9 | > [zh-cn](https://fakefish.github.io/react-webpack-cookbook/)
10 |
11 | > 如果你想修改中文版，请提交PR [中文版本](https://github.com/fakefish/react-webpack-cookbook) 或者在 [原 Repo](https://github.com/christianalfoni/react-webpack-cookbook/issues) 中提 Issues。
12 |
13 | 这本小书的目的是引导你进入 React 和 Webpack 的世界。他们两个都是非常有用的技术，如果同时使用他们，前端开发会更加有趣。
14 |
15 |
16 | 这本小书会提供所有相关的技能。如果你只是对 React 感兴趣，那可以跳过 Webpack 相关的内容，反之亦然。 如果想学习更多的相关知识可以移步 [SurviveJS - Webpack and React](http://survivejs.com/)。
17 |
18 |
19 | ## React
20 |
21 | React 是一个能够让开发模块变成简单的库。一旦你理解他的工作原理，那你就可以用它搭建自己的程序，这是不同类似 Angular 那种试着包揽一切的框架不同的地方。
22 |
23 | 如果你想很快过一遍 React 的知识点，那么 [React 官方教程](http://facebook.github.io/react/docs/tutorial.html) 是一个很好的开始。
24 |
25 | 可能 React 最有趣的事是它一直会尝试调整传统的 web 组件的思路。它让我们重新思考关注点的分离。它（[React Native](https://facebook.github.io/react-native/)）也会影响 App 开发。 React Native 提供了一种使用 JavaScript 开发原生应用同时保证了原生性能。
26 |
27 | ## Webpack
28 |
29 | Webpack 非常容易操作，它是一个模块合并的工具，本质就是一个能够把各种组件（HTML，CSS，JS）构建成项目。最方便的是你只需要初始化配置一次，Webpack 会替你做那些繁琐的事情，同时也保证了让你可以在项目中混合使用各种技术而不头疼。
30 |
31 |
32 | 如果你在 Webpack 方面完全是新手的，但想开始一个简单的教程的话，可以去 [Pete Hunt's guide](https://github.com/petehunt/webpack-howto)。你可以在那里学习到一些基础的使用，这里只是那边的一个补充。
33 |
34 |
35 | ## 作者
36 |
37 | [Christian Alfoni](http://www.christianalfoni.com/) and [Juho Vepsäläinen](http://survivejs.com/).
38 |
39 | ## 中文译者
40 |
41 | [Fakefish](http://fakefish.github.io/)
42 |
43 |
--------------------------------------------------------------------------------
/examples/content/Requiring-files.md:
--------------------------------------------------------------------------------
1 | ## 模块
2 |
3 | Webpack allows you to use different module patterns, but "under the hood" they all work the same way. All of them also works straight out of the box.
4 |
5 | Webpack 允许你使用不同的模块类型，但是 “底层”必须使用同一种实现。所有的模块都能够开箱即用。
6 |
7 | #### ES6 模块
8 |
9 | ```javascript
10 | import MyModule from './MyModule.js';
11 | ```
12 |
13 | #### CommonJS
14 |
15 | ```javascript
16 | var MyModule = require('./MyModule.js');
17 | ```
18 |
19 | #### AMD
20 |
21 | ```javascript
22 | define(['./MyModule.js'], function (MyModule) {
23 |
24 | });
25 | ```
26 |
27 | ## 理解文件路径
28 |
29 | A module is loaded by filepath. Imagine the following tree structure:
30 |
31 | 一个模块会按它的文件路径来加载，看一下下面的这个结构：
32 |
33 | - /app
34 | - /modules
35 | - MyModule.js
36 | - main.js (entry point)
37 | - utils.js
38 |
39 | Lets open up the *main.js* file and require *app/modules/MyModule.js* in the two most common module patterns:
40 |
41 | 打开 *main.js* 然后可以通过下面两种方式引入 *app/modules/MyModule.js*
42 |
43 | *app/main.js*
44 | ```javascript
45 | // ES6
46 | import MyModule from './modules/MyModule.js';
47 |
48 | // CommonJS
49 | var MyModule = require('./modules/MyModule.js');
50 | ```
51 |
52 | The `./` at the beginning states "relative to the file I am in now".
53 |
54 | 最开始的 `./` 是 “相对当前文件路径”
55 |
56 | Now let us open the *MyModule.js* file and require **app/utils**.
57 |
58 | 让我们打开 *MyModule.js* 然后引入 **app/utils**：
59 |
60 | *app/modules/MyModule.js*
61 | ```javascript
62 | // ES6 相对路径
63 | import utils from './../utils.js';
64 |
65 | // ES6 绝对路径
66 | import utils from '/utils.js';
67 |
68 | // CommonJS 相对路径
69 | var utils = require('./../utils.js');
70 |
71 | // CommonJS 绝对路径
72 | var utils = require('/utils.js');
73 | ```
74 |
75 | The **relative path** is relative to the current file. The **absolute path** is relative to the entry file, which in this case is *main.js*.
76 |
77 | **相对路径**是相对当前目录。**绝对路径**是相对入口文件，这个案例中是 *main.js*。
78 |
79 | ### 我需要使用文件后缀么？
80 |
81 | No, you do not have to use *.js*, but it highlights better what you are requiring. You might have some .js files, and some .jsx files and even images and css can be required by Webpack. It also clearly differs from required node_modules and specific files.
82 |
83 | 不，你不需要去特意去使用 *.js*，但是他能够更让你更清楚你正引入的档案。因為你可能有一些 .js 文件和一些 .jsx 文件，甚至一些图片和 css 可以用 Webpack 來引入。加入文件后缀，可以让你清楚地区分你引入的是 node_modules 或特定档案还是一般文件档案。
84 |
85 | Remember that Webpack is a module bundler! This means you can set it up to load any format you want given there is a loader for it. We'll delve into this topic later on.
86 |
87 | 记住，Webpack 只是一个模块合并器！也就是说你可以设置他去加载任何你写的匹配，只要有一个加载器。我们稍后会继续深入这个话题。
88 |
--------------------------------------------------------------------------------
/examples/content/Requiring-images-and-fonts.md:
--------------------------------------------------------------------------------
1 | - Inlining images and fonts
--------------------------------------------------------------------------------
/examples/content/Running-a-workflow.md:
--------------------------------------------------------------------------------
1 | Hitting `npm run build` all the time will get boring eventually. Fortunately we can work around that quite easily. Let's set up `webpack-dev-server`.
2 |
3 | 如果需要一直输入 `npm run build` 确实是一件非常无聊的事情，幸运的是，我们可以把让他安静的运行，让我们设置 `webpack-dev-server`。
4 |
5 | ## 设置 `webpack-dev-server`
6 |
7 | As a first step, hit `npm i webpack-dev-server --save`. In addition we'll need to tweak `package.json` *scripts* section to include it. Here's the basic idea:
8 |
9 | 第一步，输入 `npm i webpack-dev-server --save`，此外，我们需要去调整 `package.json` *scripts* 部分去包含这个指令，下面是基本的设置：
10 |
11 | *package.json*
12 | ```json
13 | {
14 | "scripts": {
15 | "build": "webpack",
16 | "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
17 | }
18 | }
19 | ```
20 |
21 | When you run `npm run dev` from your terminal it will execute the command stated as a value on the **dev** property. This is what it does:
22 |
23 | 当你在命令行里运行 `npm run dev` 的时候他会执行 **dev** 属性里的值。这是这些指令的意思：
24 |
25 | 1. `webpack-dev-server` - Starts a web service on localhost:8080
26 | 2. `--devtool eval` - Creates source urls for your code. Making you able to pinpoint by filename and line number where any errors are thrown
27 | 3. `--progress` - Will show progress of bundling your application
28 | 4. `--colors` - Yay, colors in the terminal!
29 | 5. `--content-base build` - Points to the output directory configured
30 |
31 |
32 | 1. `webpack-dev-server` - 在 localhost:8080 建立一个 Web 服务器
33 | 2. `--devtool eval` - 为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号
34 | 3. `--progress` - 显示合并代码进度
35 | 4. `--colors` - Yay，命令行中显示颜色！
36 | 5. `--content-base build` - 指向设置的输出目录
37 |
38 | To recap, when you run `npm run dev` this will fire up the webservice, watch for file changes and automatically rebundle your application when any file changes occur. How neat is that!
39 |
40 | 总的来说，当你运行 `npm run dev` 的时候，会启动一个 Web 服务器，然后监听文件修改，然后自动重新合并你的代码。真的非常简洁！
41 |
42 | Go to **http://localhost:8080** and you should see something.
43 |
44 | 访问 **http://localhost:8080** 你会看到效果。
--------------------------------------------------------------------------------
/examples/content/SUMMARY.md:
--------------------------------------------------------------------------------
1 | # Navigation
2 |
3 | [序](Home.md)
4 |
5 | * [介绍 Webpack](Introduction-to-Webpack.md)
6 | * [第一步](Getting-started.md)
7 | * [开始工作流](Running-a-workflow.md)
8 | * [浏览器自动刷新](Automatic-browser-refresh.md)
9 | * [引入文件](Requiring-files.md)
10 | * [React JS](Introduction-to-React-JS.md)
11 | * [配置 React JS](Configuring-react-js.md)
12 | * [优化重合并](Optimizing-rebundling.md)
13 | * [Flow](Type-checking-with-flow.md)
14 | * [CSS, Fonts and Images](CSS-Fonts-Images.md)
15 | * [加载 CSS](Loading-CSS.md)
16 | * [自动刷新 CSS](Automatic-CSS-refresh.md)
17 | * [加载 LESS 和 SASS](Loading-LESS-or-SASS.md)
18 | * [内联 images](Inlining-images.md)
19 | * [内联 fonts](Inlining-fonts.md)
20 | * [部署策略](Deployment-strategies.md)
21 | * [发布配置](Structuring-configuration.md)
22 | * [合并成单文件](Single-bundle.md)
23 | * [分离应用和第三方](Split-app-and-vendors.md)
24 | * [多重入口](Multiple-entry-points.md)
25 | * [懒加载入口文件](Lazy-loaded-entry-points.md)
26 | * [同构渲染](Isomorphic-app.md)
27 | * [进阶](Wing-It-Like-a-Pro.md)
28 | * [优化开发](Optimizing-development.md)
29 | * [热加载组件](Hot-loading-components.md)
30 | * [使用下一代 JavaScript](JavaScript-next.md)
31 | * [优化缓存](Optimizing-caching.md)
32 | * [匹配器](Matchers.md)
33 | * [懒加载入口](Lazy-loading-entry-points.md)
34 | * [创建一个复用代码](Creating-a-common-bundle.md)
35 | * [理解 Chunks](Understanding-chunks.md)
36 | * [创建库](Authoring-libraries.md)
--------------------------------------------------------------------------------
/examples/content/Single-bundle.md:
--------------------------------------------------------------------------------
1 | Lets have a look at the simplest setup you can create for your application. Use a single bundle when:
2 |
3 | 让我们看一下为应用创建的最简单的配置，只有在下面的情况下才使用单入口模式：
4 |
5 | - You have a small application
6 | - You will rarely update the application
7 | - You are not too concerned about perceived initial loading time
8 |
9 |
10 | - 应用很小
11 | - 很少会更新应用
12 | - 你不太关心初始加载时间
13 |
14 |
15 | *webpack.production.config.js*
16 | ```javascript
17 | var path = require('path');
18 | var config = {
19 | entry: path.resolve(__dirname, 'app/main.js'),
20 | output: {
21 | path: path.resolve(__dirname, 'dist'),
22 | filename: 'bundle.js'
23 | },
24 | module: {
25 | loaders: [{
26 | test: /\.js$/,
27 | loader: 'babel'
28 | }]
29 | }
30 | };
31 |
32 | module.exports = config;
33 | ```
--------------------------------------------------------------------------------
/examples/content/Split-app-and-vendors.md:
--------------------------------------------------------------------------------
1 | When your application is depending on other libraries, especially large ones like React JS, you should consider splitting those dependencies into its own vendors bundle. This will allow you to do updates to your application, without requiring the users to download the vendors bundle again. Use this strategy when:
2 |
3 | 当你的应用依赖其他库尤其是像 React JS 这种大型库的时候，你需要考虑把这些依赖分离出去，这样就能够让用户在你更新应用之后不需要再次下载第三方文件。当满足下面几个情况的时候你就需要这么做了：
4 |
5 | - When your vendors reaches a certain percentage of your total app bundle. Like 20% and up
6 | - You will do quite a few updates to your application
7 | - You are not too concerned about perceived initial loading time, but you do have returning users and care about optimizing the experience when you do updates to the application
8 | - Users are on mobile
9 |
10 |
11 | - 当你的第三方的体积达到整个应用的 20% 或者更高的时候。
12 | - 更新应用的时候只会更新很小的一部分
13 | - 你没有那么关注初始加载时间，不过关注优化那些回访用户在你更新应用之后的体验。
14 | - 有手机用户。
15 |
16 | *webpack.production.config.js*
17 | ```javascript
18 | var path = require('path');
19 | var webpack = require('webpack');
20 | var node_modules_dir = path.resolve(__dirname, 'node_modules');
21 |
22 | var config = {
23 | entry: {
24 | app: path.resolve(__dirname, 'app/main.js'),
25 |
26 | // Since react is installed as a node module, node_modules/react,
27 | // we can point to it directly, just like require('react');
28 | // 当 React 作为一个 node 模块安装的时候，
29 | // 我们可以直接指向它，就比如 require('react')
30 | vendors: ['react']
31 | },
32 | output: {
33 | path: path.resolve(__dirname, 'dist'),
34 | filename: 'app.js'
35 | },
36 | module: {
37 | loaders: [{
38 | test: /\.js$/,
39 | exclude: [node_modules_dir],
40 | loader: 'babel'
41 | }]
42 | },
43 | plugins: [
44 | new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')
45 | ]
46 | };
47 |
48 | module.exports = config;
49 | ```
50 | This configuration will create two files in the `dist/` folder. **app.js** and **vendors.js**.
51 |
52 | 这些配置会在 `dist/` 文件夹下创建两个文件：**app.js** 和 **vendors.js**。
53 |
54 | #### 重要的事情！
55 | Remember to add both files to your HTML file, or you will get the error: `Uncaught ReferenceError: webpackJsonp is not defined`.
56 |
57 | 记住要把这些文件都加入到你的 HTML 代码中，不然你会得到一个错误：`Uncaught ReferenceError: webpackJsonp is not defined`。
--------------------------------------------------------------------------------
/examples/content/Structuring-configuration.md:
--------------------------------------------------------------------------------
1 | There are two things you want to do preparing for a production build.
2 |
3 | 这里有两件事你需要为生产发布做准备。
4 |
5 | 1. Configure a script to run in your package.json file
6 | 2. Create a production config
7 |
8 |
9 | 1. 配置你的 package.json 里的脚本
10 | 2. 创建一个生产的配置
11 |
12 |
13 | ### 创建脚本
14 | We have already used *package.json* to create the `npm run dev` script. Now let us set up `npm run deploy`.
15 |
16 | 我们已经使用过 *package.json* 来创建 `npm run dev` 的脚本，现在让我们设置 `npm run deploy`。
17 |
18 | ```json
19 | {
20 | "name": "my-project",
21 | "version": "0.0.0",
22 | "description": "My awesome project!",
23 | "main": "app/main.js",
24 | "scripts": {
25 | "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build",
26 | "deploy": "NODE_ENV=production webpack -p --config webpack.production.config.js"
27 | },
28 | "author": "",
29 | "license": "ISC",
30 | "devDependencies": {
31 | "webpack": "^1.4.13",
32 | "webpack-dev-server": "^1.6.6"
33 | },
34 | "dependencies": {}
35 | }
36 | ```
37 |
38 | As you can see we are just running webpack with the production argument and pointing to a different configuration file. We also use the environment variable "production" to allow our required modules to do their optimizations. Lets us create the config file now.
39 |
40 | 正如你所见，我们只是用生产参数运行 Webpack 来指向另一个配置文件。我们也使用了环境变量 “production” 来让我们的模块自动去优化。让我们开始来创建配置文件。
41 |
42 | ### 创建生产配置
43 | So there really is not much difference in creating the dev and production versions of your webpack config. You basically point to a different output path and there are no workflow configurations or optimizations. What you also want to bring into this configuration is cache handling.
44 |
45 | 可以看到，其实生产环境的配置和开发的配置没有太大的不同，主要的不同是指向了一个不同的输出路径，然后也没有了 workflow 的配置和优化，可以看到新加入到配置里的是处理缓存的配置。
46 |
47 | ```javascript
48 | var path = require('path');
49 | var node_modules_dir = path.resolve(__dirname, 'node_modules');
50 |
51 | var config = {
52 | entry: path.resolve(__dirname, 'app/main.js'),
53 | output: {
54 | path: path.resolve(__dirname, 'dist'),
55 | filename: 'bundle.js'
56 | },
57 | module: {
58 | loaders: [{
59 | test: /\.js$/,
60 |
61 | // There is not need to run the loader through
62 | // vendors
63 | // 这里再也不需通过任何第三方来加载
64 | exclude: [node_modules_dir],
65 | loader: 'babel'
66 | }]
67 | }
68 | };
69 |
70 | module.exports = config;
71 | ```
72 |
73 | ### 发布
74 | Run `npm run deploy` in the root of the project. Webpack will now run in production mode. It does some optimizations on its own, but also React JS will do its optimizations. Look into caching for even more production configuration.
75 |
76 | 在项目根目录处运行 `npm run deploy`，Webpack 现在会运行生产模式，他会自动做一些优化，不过，React Js 也会做自己的优化。可以深入了解缓存处理来做更多的生产配置。
77 |
--------------------------------------------------------------------------------
/examples/content/Type-checking-with-flow.md:
--------------------------------------------------------------------------------
1 | If you come to JavaScript from other programming languages you are familiar with types. You have types in JavaScript too, but you do not have to specify these types when declaring variables, receiving arguments etc. This is one of the things that makes JavaScript great, but at the same time not so great.
2 |
3 | 如果你是从其他你更熟悉类型的编程语言转到 JavaScript 的，那么，你也可以在 JavaScript 中使用类型，不过你不需要在声明变量或者接收参数的时候指定类型。这可以让你的代码更加优雅，但是不是最优雅的。
4 |
5 | Specifically when working on very large projects with many developers type checking gives stability to your project, much like a good test does. So using **Flow** is definitely not a requirement. It is for developers who depends on type checking as more of a routine and for the before mentioned large projects with many developers. Webpack makes it easy to include **Flow** in your workflow.
6 |
7 | 具体来说，当你在一个大项目中和很多开发者一起工作的时候，类型检查对你的项目来讲是保证了稳定性，就像一个很好的测试做的事情。所以使用 **Flow** 当然不是必要条件。对于那些需要和很多开发者一起做大项目的开发者来说类型检测是一种非常寻常的事。Webpack 引入 **Flow** 之后会非常方便。
8 |
9 | ## 安装 flow
10 |
11 | - 还没尝试：）
12 | - 尝试一下 "flowcheck-loader"? https://www.npmjs.com/package/flowcheck-loader (还没用过：）)
13 | - https://tryflow.org/
--------------------------------------------------------------------------------
/examples/content/Understanding-chunks.md:
--------------------------------------------------------------------------------
1 | - Explain how webpack thinks chunks and not files
2 | - What are files to load? And what does webpack create for you? And how?
3 |
4 | - 解释 Webpack 如何理解 chunks 而不是文件。
5 | - 加载什么文件？Webpack 会创建怎么样的？如何？
--------------------------------------------------------------------------------
/examples/content/Wing-It-Like-a-Pro.md:
--------------------------------------------------------------------------------
1 | > TODO: what to discuss in intro? Maybe summarize what makes a pro. Like using hot loader, caching etc. hm hm... maybe look at it after the sub pages are done, cherry on the top :-)
--------------------------------------------------------------------------------
/examples/content/Writing-loaders.md:
--------------------------------------------------------------------------------
1 | Let's say we want a custom Markdown loader. Ie. we would like to do something like `var readme = require('../README.md');` at our JavaScript file and inject some Markdown converted as HTML there.
2 |
3 | As it happens doing something like this is quite easy with Webpack. We'll need to implement a little loader for this and hook it up with our Webpack configuration. Consider the example below. I've included syntax highlighting just for the kicks.
4 |
5 | **loaders/markdown.js**
6 |
7 | ```javascript
8 | 'use strict';
9 |
10 | var marked = require('marked');
11 | var highlight = require('highlight.js');
12 |
13 | marked.setOptions({
14 | highlight: function(code) {
15 | return highlight.highlightAuto(code).value;
16 | }
17 | });
18 |
19 |
20 | module.exports = function(markdown) {
21 | this.cacheable();
22 |
23 | return marked(markdown);
24 | };
25 | ```
26 |
27 | **Webpack configuration**
28 |
29 | ```javascript
30 | resolve: {
31 | extensions: ['.md', ...],
32 | ...
33 | },
34 | loaders: [
35 | {
36 | test: /\.md$/,
37 | loader: 'html!./loaders/markdown',
38 | },
39 | ]
40 | ```
41 |
42 | Simple as that! You can read more about [loaders at the official documentation](http://webpack.github.io/docs/loaders.html).
43 |
44 | If you want to attach some CSS for syntax highlighting by the way, you can just `require` the needed CSS like this: `require('highlight.js/styles/github.css');`. That expects `highlight.js` has been installed correctly (ie. within `node_modules`) and Webpack can find it. You should also have `css-loader` set up like this:
45 |
46 | ```javascript
47 | {
48 | test: /\.css$/,
49 | loaders: ['style', 'css'],
50 | },
51 | ```
52 |
53 | This expects you have `style-loader` and `css-loader` installed into your project, preferably as development dependencies (`npm i style-loader css-loader --save-dev`).
--------------------------------------------------------------------------------
/examples/content/_Footer.md:
--------------------------------------------------------------------------------
1 | The React Webpack Cookbook is a work in progress by @bebraw and @christianalfoni
--------------------------------------------------------------------------------
/examples/content/book.json:
--------------------------------------------------------------------------------
1 | {
2 | "gitbook": ">=2.0.0",
3 | "title": "React Webpack 小书",
4 | "description": "解决 Webpack 的一些通用小问题",
5 | "language": "zh-cn"
6 | }
7 |
--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
1 |