前端工具
webnoob
会点算法的前端程序猿~
展开
-
browserify初识
在浏览器环境无法识别下面四个变量module,export,require,global,但是在node环境中有定义。含有这几个变量的js文件需要用类似browserify或者webpack的打包工具进行打包成浏览器可以运行的js代码。这里先简单介绍下browserify的用法:1.全局安装browserify包:cnpm install browserify -g2.需要打包的代原创 2016-08-22 17:49:26 · 2821 阅读 · 0 评论 -
VSCode中emmet被自动提示覆盖问题
在我们用vscode的时候,按下emmet补全html元素,有时候会被vscode的自动提示功能给覆盖,解决的办法可以用:(1)在按下emmet快捷键(如:tabs)的时先按ESC,再快捷键(2)可以在vscode的快捷键中原创 2017-05-19 16:22:00 · 9412 阅读 · 2 评论 -
webpack初识
1.安装全局安装npm install webpack -g在项目下安装:npm install webpack --save-dev打包文件基本命令:webpack source.js bundle.js原创 2017-05-19 22:14:51 · 698 阅读 · 0 评论 -
webpack之loader
loader,即加载器。是webpack用来解析加载某些格式的文件,转化为浏览器能够识别的格式。比如转化less/sass为css,转化JSX语法为JS,转化ES6为ES5。1.安装解析es6语法我们用到babel加载器,在webpack安装如下,其他构建工具的安装查看babel官网npm install babel-loader babel-core --save-devnpm i原创 2017-05-20 14:50:13 · 1084 阅读 · 0 评论 -
webpack之css-loader
如果我们在打包的入口js文件中import了css文件,并且想要把css文件作为的内容插入到模版文件,这时候我们要用到webpack的css-loader和style-loader,前者用于在js中加载css,后者把加载的css作为style标签内容插入到html中。另外,如果某些css要考虑到浏览器的兼容性(比如css3中的flex),我们要webpack在打包的过程中自动为这些css属性加上浏原创 2017-05-20 22:38:56 · 10035 阅读 · 0 评论 -
webpack+babel+es6+react环境搭建
本文为简单搭建一个react的初始开发环境。1.工程目录新建一个工程目录(比如react-demo),在window中cmd控制台进入该目录下,执行npm init初始化目录,如下在工程目录下新建文件夹src用来存放源文件,新建文件夹dist用来存放打包后的文件,在src内新建文件夹component用来存放组件,新建文件index.js表示打包的入口文件,在根目录下新建web原创 2017-05-21 16:23:41 · 811 阅读 · 0 评论