挑战 React 第四篇

讲完透过CDN连结的方式载入React的函式库与Create React App快速安装，此篇会写最后一点高手才用的安装方式 => 一步一步自己组装自己要的档案。

安装方式

CDN 连结 (Finished)新手快速入门 Create React App (Finished)经验丰富高手 更灵活的 Toolchain使用 Node.js 的 server-rendered 网页 用 Next.js (不在这次挑战内)建立静态网页的最佳方法 Gatsby (不在这次挑战内)

经验丰富高手更灵活的 ToolChain

看到官网这段话，我满脸问号？什么是ToolChain?

下方为为官方说明 toolChain 截图:

看完这张图之后，我更是满脸问号，我只懂 npm 可以帮我管理安装一些套件，于是我查了一些资讯并整理以下，若有不正确请指教与纠正：

package管理员：建立管理所需要的套件，ex. npm install webpack 安装 webpack模组化：当 javascript 写越多会有过多的程式码不知道怎么管理，因此后来发明档案模组化，用来增加可读性与档案单一责任原则。

以下举例为将 doSomething.js 模组化，让有需要用到的档案引入即可：

//importing const doSomething = require('./doSomething.js'); //exportingmodule.exports = function doSomething(n) {  // do something}

bundler：打包这些多个模组化的js/css/图片档成一个个js/css/png档案，以下为示意图：

好处：

将你的 js 档案 Bundle 变成单一的档案将 LESS 或 SCSS 转换成 CSS分散封装专案使用的程式码，使载入页面时只需载入当页所需的程式码以加速载入速度等等功能

webpack官方文档
推荐实际操作webpack文章

compiler 维基百科翻译：编译器（compiler）是一种电脑程式，它会将某种程式语言写成的原始码（原始语言）转换成另一种程式语言（目标语言）。
ex: 以后端举例：C#/C++等高阶语言的目标语言为assembly组合语言

最后交给 compiler 编译成 javascript

学习心得

一直以来都有听到 Babel和 webpack，后来查了一些资讯原来打包工具不只有 Webpack，自己也跟着上述推荐实际操作webpack文章实际操作一遍，比较有感什么打包，但这个对现阶段的我来说还是太困难，我之后的文章还是以懒人包 create-react-app 迅速产生专案为主，等之后有机会回头再来仔细研究学习。