[React] react环境搭建一版 (7)

接下来就可以使用jquery和jquery的插件了

<!--可以使用$以及使用jquery-ui的draggable方法了--> $(el).draggable({ helper: "clone", containment: ".js-layout",//设置拖动的范围 scroll: false, cursor: "pointer",//设置拖动光标总是在中心 cursorAt: {top: 30, left: 60}, start: function (ev) { wh = { w: $(this).width() / 2, h: $(this).height() / 2 } }, drag: function (ev) { offset = $(this).offset(); }, stop: function (ev) { console.log('鼠标的位置', {top: ev.clientY, left: ev.clientX}); console.log('拖放元素的位置', {top: offset.top, left: offset.left}); let pos = {x: ev.clientX - offset.left - wh.w - 9, y: ev.clientY - offset.top - wh.h - 100 - 8}; movecb(pos) } });

webpack文档

方法2.expose-loader

使用expose-loader可以暴露全局变量

module: { rules: [ { test: require.resolve('jquery'), use: [{ loader: 'expose-loader', options: 'jQuery' }, { loader: 'expose-loader', options: '$' }] }, ] },

此时的效果和方法一的一样
webpack文档

使用jquery-ui的方法 使用npm <!--可以通过npm i下载--> npm i jquery-ui --save <!--然后在组件中引入--> import "jquery-ui/ui/widgets/draggable";

需要一个个引入你需要的方法，也可以做一个总文件进行引入

直接下载

从官网下载jquery-ui，然后放到项目中的一个文件夹下

import "../../plugins/jquery-ui"

这样可以直接引入生效，但是打包的文件会大不少

查看文章

webpack多页应用架构系列（四）：老式jQuery插件还不能丢，怎么兼容？
Webpack引入jquery及其插件的几种方法

12.开发常用工具

prop-types

classnames

附1.依赖 搭建框架

babel

webpack

webpack-dev-server

babel基本

[babel-cli]

babel-core 可以对一些代码直接调用Babel的API进行转码

babel-loader 使babel在webpack中支持

babel-preset-env 最新的标准版本取代stage0，1，2，3等等

babel-preset-react 预设包含了所有的 React 插件

babel-polyfill

babel其他

babel-plugin-react-transform 任意转换的方式去封装 React 组件

babel-plugin-transform-object-rest-spread 使对象支持Object rest spread，展开运算符

babel-plugin-transform-remove-strict-mode 将"use strict"去掉，看需求可用可不用 官网

babel-plugin-transform-runtime 在 Babel 转换过程中，详细的展示引用的相关辅助工具和内置命令，并自动的聚合填充你的代码而不会污染全局

react

react

react-router

react-router

[react-router-dom]

redux

redux

react-redux

redux-freeze运行时报错机制

redux-thunkredux的异步中间件

redux-logger日志中间件

redux-immutable在不可变数据类型中合并reducer

redux-create-reducer使用action和reducer的关联变的简单

关于redux中间件的讲解

ant-design

在react.js上使用antd-design

antd-design

babel-plugin-import 用于antd按需加载

loader

less-loader

css-loader

style-loader

babel-polyfill

[file-loader]

[url-loader]

[image-webpack-loader]

html-webpack-plugin

[extract-text-webpack-plugin] 将css单独打包