在本搭建项目过程中有考虑到 React负责UI渲染，还需要用redux来管理数据，使用es6，webpack，为了提高性能，需要按需加载，还有immutable.js、单元测试等等。下面将会详细介绍
搭建项目流程
1 > mkdir dataProject && cd dataProject
2 > npm init
3 > npm install webpack --save-dev
注： --save-dev 与 –save的区别
--save-dev 开发时候依赖的东西，放在package.json的devDependencies模块，--save 发布之后还依赖的东西，放在dependencies模块。
比如，你写 ES6 代码，如果你想编译成 ES5 发布那么 babel 就是devDependencies。
如果你用了jQuery，由于发布之后还是依赖jQuery，所以是dependencies。但是在 npm 里面除了二进制的依赖，似乎也不用区分是不是dev。因为使用npm就是自己编译的意思，而不使用npm直接拿编译后的版本的，这些依赖项也看不到。
4 webpack配置
a. entry和output
entry: webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。可根据它的属性定义设置单入口应用程序、分离应用程序、多页面程序。
output: 配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。filename 用于输出文件的文件名。目标输出目录 path 的绝对路径。
const config = {
entry: path.join(__dirname, 'src/index.js'),
output:{
path: path.join(__dirname, 'dist'),
filename: 'app.js'
}}
学会使用webpack
在package.json中的script属性设置命令：
"build": "webpack --config webpack.config.js"
运行 npm run build，会发现多了一个dist文件夹，其内部包含一个app.js文件
dist文件夹下面新建一个app.html
dist/app.html填写内容
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./app.js" charset="utf-8"></script>
</body>
</html>
用浏览器打开app.html，会发现src内部的index.js内容被编译到了app.js。
b. loader
loader让webpack 能够去处理那些非JavaScript 文件，可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。实质上是，将所有类型的文件，转换为应用程序依赖图可以直接引用的模块。
比如npm install --save-dev css-loader，告诉webpack加载css文件。
loader: [
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},{
test: /\.(png|jpg|gif|woff|woff2)$/,
loader: 'url-loader?limit=8192'
},{
test: /\.(mp4|ogg|svg)$/,
loader: 'file-loader'
},{
test:/\.json$/,
loader:'json-loader'
}
]
loader 支持链式传递。能够对资源使用流水线(pipeline)。一组链式的 loader 将按照先后顺序进行编译。
一个loader预期导出一个函数，而且是用兼容javascript的nodepgn
c.（后续补充）
d.plugin
webpack 插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问
const webpack = require('webpack'); //访问内置的插件
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
let BowerWebpackPlugin = require('bower-webpack-plugin');
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'}),
new BowerWebpackPlugin({
searchResolveModulesDirectories: false
})
]
解析：
HtmlWebpackPlugin:自动生成一个HTML文件，并引用相关的assets文件。
webpack.optimize.UglifyJsPlugin()：压缩插件，优化缩小js包体积。
webpack.optimize.CommonsChunkPlugin()：提取公共代码块。webpack的资源入口通常是以entry为单元进行编译提取，那么当多entry共存的时候，它可以对所有依赖的chunk以module为单位进行公共部分的提取。可以向其内部输入参数来设置提取所有入口的公共部分，也可以提取部分公共部分。可以实现：
①多入口，模块重复引用，分文件输出（将多次引用的模块打包到公共模块）
②将公共业务模块与类库或框架分开打包；
（见https://segmentfault.com/a/1190000006808865）
延伸：如何解决webpack大包体积过大
e.resolve
设置模块如何被解析，其常用属性有：
Alias：创建 import 或 require 的别名，来确保模块引入变得更简单
extension：自动解析扩展，能够使用户在引入模块时不带扩展，默认有[‘.js’,’.json’]。
plugins：应该使用的额外的解析插件列表
e.devServer
webpack-dev-server 能够用于快速开发应用程序，使用方法
devServer: {
contentBase: './src/',
historyApiFallback: true,
hot: true,
port: defaultSettings.port,
publicPath: defaultSettings.publicPath,
noInfo: false
}
contentBase：告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要。
historyApiFallback：当使用 HTML5 History API 时，任意的 404 响应都可能需要被替代为 index.html，则其值为true。通过传入一个对象，比如使用 rewrites 这个选项，此行为可进一步地控制。
hot：启用 webpack 的模块热替换特性
port:指定要监听请求的端口号
publicPath：此路径下的打包文件可在浏览器中访问
noInfo：当为true时，启用 noInfo 后，诸如「启动时和每次保存之后，那些显示的 webpack 包(bundle)信息」的消息将被隐藏。错误和警告仍然会显示。
lazy：当启用 lazy 时，dev-server 只有在请求时才编译包(bundle)。这意味着 webpack 不会监视任何文件改动。我们称之为“惰性模式”。
e.
后续使用过程再补充
5 babel
Babel 把用最新标准编写的 JavaScript 代码向下编译成可以在今天随处可用的版本。 这一过程叫做“源码到源码”编译， 也被称为转换编译。
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0
a. babel文件配置
新建babel配置文件.babelrc，内容为
{
"presets": [
"es2015",
"react",
"stage-0"
],
"plugins": []
}
b.详细介绍
①babel-core 转码
如果你需要以编程的方式来使用 Babel，可以使用 babel-core 这个包。babel-core 的作用是把 js 代码分析成 ast ，方便各个插件分析语法进行相应的处理。有些新语法在低版本 js 中是不存在的，如箭头函数，rest 参数，函数默认值等，这种语言层面的不兼容只能通过将代码转为 ast，分析其语法后再转为低版本 js。
首先安装 babel-core
②babel-loader
允许用babel或webpack编译JavaScript文件。
需要在webpack的配置文件中的添加babel-loader：
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
③ babel-preset-es2015 用于解析 ES6
④ babel-preset-react 用于解析 JSX
⑤ babel-preset-stage-0 用于解析 ES7 提案
检测：将index.js文件使用箭头函数编写
var fun = str => {
document.getElementById('app').innerHTML = str;
}
fun('Babel设置成功')
网友评论