react+webpack+babel+ant-design学习总结

最新推荐文章于 2024-07-08 09:56:15 发布

weixin_34032779

最新推荐文章于 2024-07-08 09:56:15 发布

阅读量161

点赞数

文章标签： webpack json javascript ViewUI

原文链接：https://my.oschina.net/wotrd/blog/1604009

版权

为什么80%的码农都做不了架构师？>>>

----------------------------------------------------------------------------------------
react+webpack_babel+antdesign项目具体配置请参考：https://www.jianshu.com/p/42e11515c10f
react-app:

src目录下是js和css的源码
public目录是进行发布的东西，打包之后，将生成的文件根据相对路径放在Tomcat根目录下就可以进行访问。
node_module是nodejs依赖的包
-----------------------------------------------------------------------------------
package-lock.json也是用来配置依赖，如果和package.json不一致的话，会去下载可以通过：
`npm install` 命令进行下载。如果项目中依赖的包在lock.json中存在的话，就不会进行下载了。
可以正常使用。否则会报包不存在的错误！

package.json配置：可以通过 npm init命令在项目根目录中生成。
npm install 会把msbuild包安装到node_modules目录中不会
修改package.json之后运行npm install命令时，不会自动安
装msbuild，
加上save安装到dependencies中，加上dev安装到devDependencies中
原则：运行时需要用到的包使用--save，否则使用--save-dev。

dependencies:项目在生产环境中用的包---devDependencies:
项目在开发和测试环境中依赖的包
prestart,start,poststart: 通过npm start命令运行*/
scripts: 声明一系列npm脚本指令
pretest,test,posttest: 通过npm test命令运行
prestop,stop,poststop: 通过npm stop命令运行
prestart,start,poststart: 通过npm start命令运行
prepublish: 在包发布之前运行，也会在npm install安装到本地时运行
publish,postpublish: 包被发布之后运行
preinstall: 包被安装前运行
install,postinstall: 包被安装后运行
preuninstall,uninstall: 包被卸载前运行
postuninstall: 包被卸载后运行
preversion: bump包版本前运行
postversion: bump包版本后运行
prerestart,restart,postrestart: 通过npm restart运行
-------------------------------------------------------------------------------------
router：局部刷星，只更新修改的部分。
   通过Router，Link最终翻译成a标签。Router只能有一个子元素。一般嵌套一个div
    router分为：HashRouter、BrowserRouter、MemoryRouter等，官方推荐使用BrowserRouter
    HashRouter属于静态路由，刷新的话可以正常显示，不过url中会有#号存在。
    BrowserRouter属于动态路由，依赖于服务器刷新的话会出现404.需要进行设置。
   MemoryRouter主要用来做reactNative用来做移动端应用，单页程序

webpack：打包工具

webpack是如何处理如上webpack.config文件解析
webpack可以通过在命令行也可以通过配置文件进行打包：

webpack.config.js配置：
命令行： webpack entry.js ../public/bundle.js
配置文件：在项目的根目录下简历webpack.config.js文件进行配置，然后在命令行输入webpack就可以进行打包，配置文件执行的东西命令行都可以实现，只不过可以减少错误。
注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。
"start": "webpack" // 修改的是这里，JSON文件不支持注释，引用时请清除，在package.json文件的scripts中进行设置。npm的start命令是一个特殊的脚本名称，其特殊
性表现在，在命令行中使用npm start就可以执行其对于的命令，如果对应的此脚本名称不是start，想要在命令行中运行时，需要这样用npm run {script name}如npm run build

1：生成Source Maps（使调试更容易）：devtool
2:入口和出口（entry：output）：entry和output 确定webpack的编译起点和终点，output定义webpack编译的终点，导出目录
3：模块（module）： module.loaders 和 module.test 确定模块预编译处理方式以babel为例，当webpack发现模块名称匹配test中的正则/js[x]?的时候。
它会将当前模块作为参数传入babel函数处理，babel([当前模块资源的引用])。函数执行的结果将会缓存在webpack的compilation对象上，并分配唯一的id 。
   加载器（loader）
webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,
style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。
被称为CSS modules的技术意在把JS的模块化思想带入CSS中来，通过CSS模块，所有的类名，动画名默认都只作用于当前模块。Webpack对CSS模块化提供了非常好的支持，
只需要在CSS loader中进行简单配置即可，然后就可以直接把CSS的类名传递到组件的代码中，
url-loader, file-loader
两个都必须用上。否则超过大小限制的图片无法生成到目标文件夹中
在 webpack 中引入图片需要依赖 url-loader 这个加载器。
babel-loader，babel-preset-es2015，babel-preset-react
js处理，转码
loaders之 json处理
loaders之 html处理

4：devServer: {//本地的webpack服务器，配置package.json的start命令，使其打开本地服务
//配置为"server"："webpack-dev-server --open"
contentBase:"./public",//本地服务器所加载的页面所加载的目录
historyApiFallback:true,//用在单页程序打开，true表示永远执行index。html不进行跳转
inline:true,//表示自动刷新
},

5:插件（Plugins）：plugin阶段贯穿于webpack的整个编译流程，一般用来做一些优化操作。

插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，
loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。Webpack有很多内置插件，
同时也有很多第三方插件，可以让我们完成更加丰富的功能。
常用插件：
1：HtmlWebpackPlugin
这个插件的作用是依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不同时非常有用（比如添加了hash值）。
2：OccurenceOrderPlugin :为组件分配ID，通过这个插件webpack可以分析和优先考虑使用最多的模块，并为它们分配最小的ID
3：UglifyJsPlugin：压缩JS代码；
4：ExtractTextPlugin：分离CSS和JS文件去除build文件中的残余文件添加了hash之后，会导致改变文件内容后重新打包时，文件名不同而内容越来越多，因此这里介绍另外一个很好用的插件clean-webpack-plugin。
5.CommonsChunkPlugin (合并代码)：两个用法：一个是抽取公共的包，另一个则是把多个保重的公共依赖抽取出来抽取公共包可以优化整体包的体积，一般用在开发环境，可以加快rebuild的速度
抽取公共依赖可以优化整体包的体积，即可以一次下载多次使用,后面的包因为公共依赖的被提取，包的体积减小，可以加快运行速度。
6：webpack.ProvidePlugin，它会在对编译结果再加工的操作过程中进行自定义的变量注入，当模块中碰到比如_这个变量的时候，webpack将从缓存的module中取出underscore模块加载进引用_的文件(compilation.assets)。
7：WebpackNotifierPlugin，它会在编译结果ready的时通知开发者，output已经就绪。
8：DedupePlugin：有些JS库有自己的依赖树，并且这些库可能有交叉的依赖，DedupePlugin可以找出他们并删除重复的依赖。

babel：js的转译工具主要用于es6转es5：

Babel其实是一个编译JavaScript的平台，它可以编译代码帮你达到以下目的：

让你能使用最新的JavaScript代码（ES6，ES7...），而不用管新标准是否被当前使用的浏览器完全支持；
让你能使用基于JavaScript进行了拓展的语言，比如React的JSX

Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用，对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析Es6的babel-env-preset包和解析JSX的babel-preset-react包）。
常用包或插件：babel-env-preset babel-preset-react babel-core babel-preset-es2015