eslint

现代化前端的全局引入是一个很有趣的东西。 先来看下以下几个场景： 在webpack中，我们可以在resolve的alias中定义一个层级较高的目录为一个自定义变量。例如 resolve: { alias: { '@': path.join(__dirname, '..', 'src') }} 。 在webpack中，我们也可以通过DefinePlugin将配置文件按照环境变量进行区分，高效的完成配置文件的按环境引入，无论是开发构建还是生产构建，都十分有用。 在vue中，我们可以将一个常用的方法或者库定义在Vue.ptototye上，可以通过直写属性，也可以通过vue中的plugin install上去。例如 Vue.prototype.$_ = lodash ，在应用了vue的应用上下文中，可以通过this.$_获得对lodash的引用。 在vue中，还有mixins，inject以及vuex等等这些全局绑定或者叫混入、注入方式的全局引入的实现。 来思考一个问题： 如果我们再Vue.prototype上绑定了太多，太大的第三方库，会不会导致root vue过大？ 答案是肯定的。 有没有办法解决这个问题？ 你可能会说，我不用this.xxx。用到的vue单文件组件直接import或者require就好了。 如果数以百计，数以千计甚至是数以万计的.vue文件中用到了呢？一直引入吗？

webpack打包多页面的方式 一、总结 一句话总结： webpack可以进行多页面打包编译 二、webpack打包多页面的方式 转自或参考：webpack打包多页面的方式 - 简书 https://www.jianshu.com/p/5c50a45ee7fc 一开始接触webpack是因为使用Vue的关系，因为Vue的脚手架就是使用webpack构建的。刚开始的时候觉得webpack就是为了打包单页面而生的，后来想想，这么好的打包方案，只在单页面上使用是否太浪费资源了呢？如果能在传统多页面上使用webpack，开始效率是否会事半功倍呢？好在众多优秀的前端开发者已经写了许多demo和文章供人学习。我也写了一个小项目，希望对大家学习webpack有帮助。 webpack-multi-page 项目解决的问题 不想做SPA，想做多页应用怎么破？又或是，我司项目需要后端渲染，页面模板怎么出？ 每个页面相同的UI布局好难维护，UI稍微改一点就要到每个页面去改，好麻烦还容易漏，怎么破？ 能不能整合进ESLint来检查语法？ 能不能整合postcss来加强浏览器兼容性？ 我可以使用在webpack中使用jquery吗？ 我可以使用在webpack中使用typescript吗？ src目录对应dist目录 当我们使用webpack打包多页面，我们希望src目录对应打包后dist目录是如上图这样的

前言 一周的砖又快搬完了，又到了开心快乐的总结时间~这两周一直在 hook 函数的“坑”里，久久不能自拔。应该也不能叫做“坑”吧，还是自己太菜了，看文档不仔细，很多以为不重要，但在实际应用中却很关键的点总是被自己忽略。所以我准备多花点时间，把官网的一些 hook 函数，再回过头看一遍，整理整理（在整理的过程，我觉得更容易发现问题和总结经验）。 这篇文章主要整理一下 React 中的三个基础 Hook： useState useEffect useContext useState useState 相比其他 hooks 还是很简单的，主要就是用来定义变量。 官方文档 描述的也很清楚，对此已经很熟练的看官大大可以跳过哦~ 相遇--初识 const [count, set Count] = useState(0) 复制代码 调用 useState 方法做了什么？ 定义一个“state变量”。 useState 需要什么参数？ useState 方法接收一个参数，作为变量初始化的值。（示例中调用 useState 方法声明一个 “state变量” count ，默认值为 0。） useState 方法的返回值是什么？ 返回当前 state 以及更新 state 的函数。 相知--使用useState React 会确保 setState 函数的标识是稳定的，并且不会在组件重新渲染时发生变化

一、vue有两种使用方式： 1.下载vue.js < script src= "vue.js"> </ script> 2.使用npm npm install vue 二、在vue的mvc思想基础上，会有很多想实现的功能，可以不必原生写。比如ajax请求，各种插件。 安装vue-cli，促使这些插件可以在vue上运行。 npm install vue- cli -g 三、vue安装成功测试 cmd 中,(vue各种模板) vue -V vue list 四、使用vue，结合webpack开发。 从vue的角度讲，使用了模块化编写代码。 从webpack的角度讲，编译后的代码，页面全是js写的，别人看不懂，也压缩了文件大小。 五、vue+webpack简单流程操作 1、文件夹中、shift+右键，选择“在此处打开命令窗口” vue init webpack test test是项目名字 2、 1.项目名字， 2.项目描述， 3.项目作者， 4.使用vue什么模式， 5.是否安装vue路由， 6.是否使用eslint检查代码（建议no，严格要求es6编码）， 7.不知道， 8.不知道， 3、进入项目文件夹，shift+右键，选择“在此处打开命令窗口” npm install 此步骤就是安装package.json中预设，要装的插件。 4、 1.build，vue能进行模块化编写

注:3.0 级以上版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli.且安装前提是已经全局安装过node 和 webpack. 所有版本安装 　　vue -V 查看版本 　　npm uninstall vue-cli -g 非3.x时卸载 　　npm install -g @vue/cli 装3 　　npm install -g @vue/cli-init 桥接2 初始化项目 执行命令: vue init webpack demo 新建的项目名/文件名 　　　　 vue init webpack . 在当前目录新建的项目 　　执行之后会有输入设置. Project name ->soho <项目名称> 项目名称不能包含大写字母. Project description ->项目描述 Author ->作者 Vue build ->standalone Install vue-router? ->Yes Use ESLint to lint your code? ->Yes Pick an ESLint preset ->Standard Setup unit tests with Karma+Mocha? ->No Setup ese tests with Nightwatch? ->No 项目文件配置介绍 1-> build 和 config

作者说明 （1）JS说明 JS是非常重要的一门语言，但是，我们对JS的认识似乎仍然停留在“hello word”或者“alert”的观念上。其实,JS发展到现在已经非常的成熟，功能也非常的强大，因此，是时候重新认识一下JavaScript了。 使用JS的 WebAssembly 甚至 能开发出类似汇编语言程序。而利用 NW.js Node.js, Vue.js... 可以很容易跨平台开发。 本视频来源于youtube上一位网友发布的视频教程，但是因为人所共知的原因，很多用户无法查看，因此，这里，我把这个视频下载下来，放到了我自己的服务器上，供希望学习JS的朋友收看。 （2）此视频介绍了那些内容？ 和普通的JS教程不同，本视频共54个课程，每个课程都长度基本上在3-5分钟，然后通过一个个知识点来介绍JS的核心要点。在这里，你能学习一些新的JS语法。 例如：在第5课里，你将学习什么是箭头函数 const double2=numbers.map(()=>{ return "hello"}); // => 这个胖箭头是干嘛的 在第9课里，介绍了模板字符串。当我们看一下vue.js等教程时，你知道这种写法的意思吗？ `${hello},name` 　　 在第20课程里，你讲学习什么是剩余参数 function sum(...num) //参数里，有3个点，是什么意思？ { console

最近在学习nodejs爬虫技术，学了request模块，所以想着写一个自己的爬虫项目。 研究了半天，最后选定indeed作为目标网站，通过爬取indeed的职位数据，然后开发一个自己的职位搜索引擎。 目前已经上线了，虽然功能还是比较简单，但还是贴一下网址：job search engine，证明一下这个爬虫项目是有用的。 下面就来讲讲整个爬虫的思路。 确定入口页面 众所周知，爬虫是需要入口页面的，通过入口页面，不断的爬取链接，最后爬取完整个网站。 在这个第一步的时候，就遇到了困难，一般来说都是选取首页和列表页作为入口页面的，但是indeed的列表页面做了限制，不能爬取完整的列表，顶多只能抓取前100页。 但是这没有难倒我，我发现indeed有一个Browse Jobs 页面，通过这个页面，可以获取indeed按地区搜索和按类型搜索的所有列表。 下面贴一下这个页面的解析代码。 start: async (page) => { const host = URL.parse(page.url).hostname; const tasks = []; try { const $ = cheerio.load(iconv.decode(page.con, 'utf-8'), { decodeEntities: false }); $('#states > tbody > tr > td >

配置文件中的eslint rules注释掉即可。但不推荐这么做，eslint检测是有必要的，能保持良好的代码风格。 把不符合自己习惯的规则去掉。 常见规则列表 "no-alert": 0,//禁止使用alert confirm prompt "no-array-constructor": 2,//禁止使用数组构造器 "no-bitwise": 0,//禁止使用按位运算符 "no-caller": 1,//禁止使用arguments.caller或arguments.callee "no-catch-shadow": 2,//禁止catch子句参数与外部作用域变量同名 "no-class-assign": 2,//禁止给类赋值 "no-cond-assign": 2,//禁止在条件表达式中使用赋值语句 "no-console": 2,//禁止使用console "no-const-assign": 2,//禁止修改const声明的变量 "no-constant-condition": 2,//禁止在条件中使用常量表达式 if(true) if(1) "no-continue": 0,//禁止使用continue "no-control-regex": 2,//禁止在正则表达式中使用控制字符 "no-debugger": 2,//禁止使用debugger "no-delete-var"

概念 Webpack是一个 模块打包机 ，它可以将我们项目中的所有js、图片、css等资源，根据其入口文件的依赖关系，打包成一个能被浏览器识别的js文件。能够帮助前端开发将打包的过程更智能化和自动化。 WebPack和Grunt以及Gulp相比有什么特性 Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。 开始使用 安装webpack，目前webpack已更新到4.x版本，且大力度宣传的是 cli 方式启动，更推崇的是让开发者使用高度封装的 cli。基于此，我们应该安装 webpack^4.1.1、webpack-cli^2.0.10 (想要执行webpack的命令必须有这个包) 、webpack-dev-server^3.1.0。 webpack的mode webpack4 的 mode 给出了两种配置： development 和 production 。生产模式下，启用了 代码压缩、作用域提升（scope hoisting）、 tree-shaking，使代码最精简；开发模式下，相较于更小体积的代码，提供的是打包速度上的优化。所以，我们一般配置2个文件，webpack.dev.conf

前言 微信小程序因为其便捷的使用方式，以极快的速度传播开来吸引了大量的使用者。市场需求急剧增加的情况下，每家互联网企业都想一尝甜头，因此掌握小程序开发这一技术无疑是一名前端开发者不可或缺的技能。但小程序开发当中总有一些不便一直让开发者诟病不已，主要表现在： 初期缺乏方便的npm包管理机制（现阶段确实可以使用npm包，但是操作确实不便） 不能使用预编译语言处理样式 无法通过脚本命令切换不同的开发环境，需手动修改对应环境所需配置（常规项目至少具备开发与生产环境） 无法将规范检查工具结合到项目工程中（诸如EsLint、StyleLint的使用） 有了不少的问题之后，我开始思考如何将现代的工程化技术与小程序相结合。初期在社区中查阅资料时，许多前辈都基于gulp去做了不少实践，对于小程序这种多页应用来说gulp的流式工作方式似乎更加方便。在实际的实践过后，我不太满意应用gulp这一方案，所以我转向了对webpack的实践探索。我认为选择webpack作为工程化的支持，尽管它相对gulp更难实现，但在未来的发展中一定会有非凡的效果， 实践 我们先不考虑预编译、规范等等较为复杂的问题，我们的第一个目标是如何应用webpack将源代码文件夹下的文件输出到目标文件夹当中，接下来我们就一步步来创建这个工程项目： /* 创建项目 */ $ mkdir wxmp-base $ cd ./wxmp-base