个人经验总结
不要太过迷信网上的各种demo，还是要自己对工具有一定的理解。
收集到的资料
- 阮一峰老师写的demo，比较基础，入门
- 也是比较基础的入门教程
开发插件、loader、依赖包
----react、redux相关----
react
npm install react react-dom --save
redux
npm install redux --save
react-redux
npm install react-redux --save
reselect
npm install reselect --save
Simple “selector” library for Redux
react-router
npm install react-router --save
react-router-redux
npm install react-router-redux --save
redux-thunk
npm install redux-thunk --save
Thunk middleware for Redux.
----webpack相关----
webpack
npm install webpack --save-dev
webpack-dev-server
npm install webpack-dev-server --save-dev
----loader相关----
css-loader
npm install css-loader --save-dev
css-loader会遍历css文件，找到所有的url(...)并且处理。
style-loader
npm install style-loader --save-dev
style-loader会把所有的样式插入到你页面的一个<style>标签当中
sass-loader
npm install sass-loader node-sass --save-dev
要用sass-loader，必须有node-sass，但是这个模块有可能被墙掉，可以参考安装 node-sass 的正确姿势， 如不实在装不了才用连接中的方法
file-loader
npm install file-loader --save-dev
url-loader
npm install url-loader --save-dev
根据你的需求将一些图片自动转成base64编码的，为你减轻很多的网络请求。
主要，要先有file-loader
// 如果图片小于8192 bytes，就会转成Data URL
loaders: [
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }
]
----ES6相关----
babel-loader
npm install babel-loader babel-core babel-preset-es2015 --save-dev
babel就不多说了，将ES6的语法转成ES5
babel-preset-react
npm install babel-preset-react --save-dev
只是我的个人猜测，这个让babel支持JSX的转换
结合上一个babel-loader，要在根目录下创建一个 .babelrc 文件，文件里写下面的内容
{
"presets": ["react", "es2015"]
}
babel-plugin-transform-es2015-modules-simple-commonjs
npm install babel-plugin-transform-es2015-modules-simple-commonjs --save-dev
Babel转换es6怎么支持ie8?
该插件可以解决上述问题
要在根目录下创建一个 .babelrc 文件，文件里写下面的内容
{
"presets": ["es2015"],
"plugins": [
"transform-es2015-modules-simple-commonjs"
]
}
isomorphic-fetch
npm install isomorphic-fetch es6-promise --save-dev
fetch API，具体见:
Fetch API
【翻译】这个API很“迷人”——(新的Fetch API)
Redux 中文文档Redux 中文文档也有提到一些
// 在应用中其它任何代码执行前调用一次
import 'babel-polyfill'
// 每次使用 `fetch` 前都这样调用一下
import fetch from 'isomorphic-fetch'
babel-polyfill
npm install babel-polyfill --save-dev
话说我也不知道这个是什么鬼，不过上面的isomorphic-fetch需要用到，有人可以补充一下吗？
----ES7相关----
babel-plugin-transform-object-rest-spread
npm install babel-plugin-transform-object-rest-spread --save-dev
要在根目录下创建一个 .babelrc 文件，文件里写下面的内容
{
"plugins": ["transform-object-rest-spread"]
}
----redux相关----
redux-logger
npm install redux-logger --save-dev
这个只是一个记录器中间件，用不用也没所谓
----插件plugins----
uuid
npm install uuid --save-dev
生成唯一的id值
html-webpack-plugin
npm install html-webpack-plugin --save-dev
- 功能：帮助生成HTML文件
- 配置Configuration，可以进行一系列的配置，支持如下的配置信息：
- title: 用来生成页面的 title 元素
- filename: 输出的 HTML 文件名，默认是 index.html, 也可以直接配置带有子目录。
- template: 模板文件路径，支持加载器，比如 html!./index.html
- inject: true | 'head' | 'body' | false ,注入所有的资源到特定的 template 或者 templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部，'head' 将放置到 head 元素中。
- favicon: 添加特定的 favicon 路径到输出的 HTML 文件中。
- minify: {} | false , 传递 html-minifier 选项给 minify 输出
- hash: true | false, 如果为 true, 将添加一个唯一的 webpack 编译 hash 到所有包含的脚本和 CSS 文件，对于解除 cache 很有用。
- cache: true | false，如果为 true, 这是默认值，仅仅在文件修改之后才会发布文件。
- showErrors: true | false, 如果为 true, 这是默认值，错误信息会写入到 HTML 页面中
- chunks: 允许只添加某些块 (比如，仅仅 unit test 块)
- chunksSortMode: 允许控制块在添加到页面之前的排序方式，支持的值：'none' | 'default' | {function}-default:'auto'
- excludeChunks: 允许跳过某些块，(比如，跳过单元测试的块)
- 详细请看具体内容
extract-text-webpack-plugin
npm install extract-text-webpack-plugin --save-dev
独立出css样式
如果我们希望样式通过 <link>引入，而不是放在 <style>标签内，可以使用这个插件
babel-plugin-transform-do-expressions
npm install babel-plugin-transform-do-expressions --save-dev
使JSX可以使用
if-else表达式 ，例如：
{do {
if (loading) {
<Loading></Loading>
} else {
<Programa items={homePrograma}></Programa>
}
}}
要在根目录下创建一个 .babelrc 文件，文件里写下面的内容
{
"plugins": ["transform-do-expressions"]
}
open-browser-webpack-plugin
npm install open-browser-webpack-plugin --save-dev
Opens a new browser tab when Webpack loads.
在webpack-dev-server启动时，在浏览器自动打开一个新的页签
网友评论