babel

js是弱类型语言，语法很松散，这是一个缺点。 之前，在js中变量声明：var。 为了解决这个缺点，js中声明变量新增两个语法：let、const var 特点有三： 变量声明提升、 可重复定义同一个名字的变量不报错、 全局变量挂载到window let和const的特性： 没有变量声明提升 不能重复声明同一个变量，即使是var过的变量，甚至是行参也不行。 声明的变量不会挂载到window上 有块级作用域的特点 在大括号 {}里边会形成临时死区 可解决闭包问题 。 [const特殊] var和let定义变量，const定义常量 let和const的特性详解 ： let /const 声明的变量不会进行变量声明提升： let/const重复声明一个变量报错 。 如果这个变量已经被var过了 ，也不能再继续let /const定义了 ： 延伸到函数的行参上 ： 函数行参在函数内部也是相当于var了一个变量的存在。 用var定义变量覆盖行参： 但是如果在函数内部用let声明一个和行参同名的变量，就会报错： let/const声明的变量不会挂在到window上 ，var会（容易造成混乱和冲突，window上的原有属性不能随便改）。 let/const加强对作用域的控制 ： 作用域就是变量的生命周期，或者说变量在哪里能够被使用。 也就说let/const能让变量的生命周期更精准 、更规范。

本篇文章以整理为主，自己进行了部分修改，如有侵权，请告知 CSS Modules介绍 CSS Modules是什么东西呢？首先，让我们从官方文档入手： GitHub – css-modules/css-modules: Documentation about css-modules CSS模块就是所有的类名都只有局部作用域的CSS文件。 所以CSS Modules既不是官方标准，也不是浏览器的特性，而是在构建步骤（例如使用Webpack或Browserify）中对CSS类名选择器限定作用域的一种方式（通过hash实现类似于命名空间的方法）。 在使用CSS模块时，类名是动态生成的，唯一的，并准确对应到源文件中的各个类的样式。 这也是实现样式作用域的原理。它们被限定在特定的模板里。例如我们在buttons.js里引入buttons.css文件，并使用.btn的样式，在其他组件里是不会被.btn影响的，除非它也引入了buttons.css. 可我们是出于什么目的把CSS和HTML文件搞得这么零碎呢？我们为什么要使用CSS模块呢？ 为什么我们需要CSS模块化 CSS全局作用域问题，样式冲突（污染）的问题。 class命名写长一点吧，降低冲突的几率 加个父元素的选择器，限制范围 重新命名个class吧，比较保险 可是以上方案只是降低了全局冲突的概率，并不能彻底解决全局冲突的问题。并且

-S 即-- save（保存） 包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在 -D 即-- dev（生产） 包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用 -D，如babel，sass-loader这些解析器 啥也不写 包名不会进入package.json里面，因此别人不知道你安装了这个包（...智障） npm install -d 就是 npm install --save-dev 安装到开发环境 例如 gulp ，babel，webpack 一般都是辅助工具 npm insatll -s 就是npm install --save 安装到生产环境 如 vue ,react 等 npm -i 与npm install -s与-d的区别 npm i module_name -S = > npm install module_name --save 写入到 dependencies 对象 npm i module_name -D => npm install module_name --save-dev 写入到 devDependencies 对象 npm i module_name -g 全局安装 i 是install 的简写 -S 就是 --save 的简写 -D就是-

备注：<=> 意为等价于； 1、npm install <=> npm i --save <=> -S --save-dev <=> -D npm run start <=> npm start // 对应"scripts"里的"start"命令 少敲几下键盘，何乐而不为 2、npm i --save-dev <packname> 工程构建（开发时、“打包”时）依赖 ；例：xxx-cli , less-loader , babel-loader... 在 package.json 文件里面体现出来的区别就是，使用 --save-dev 安装的插件，被写入到 devDependencies 对象里面去，而使用 --save 安装的插件，则被写入到 dependencies 对象里面去。 3、npm i --save <packname> 项目（运行时、发布到生产环境时）依赖；例：antd , element,react... 那 package.json 文件里面的 devDependencies和dependencies对象有什么区别呢？ devDependencies是对开发环境所需依赖的声明(构建工具，测试工具) ，比如：babel，webpack，都放到当前目录。 而 dependencies是对生产环境所需依赖的声明(开发应用中使用的框架，库) ，比如：jq，react

前言： 　　webpack 超级实用前端环境搭建 一、 我们日常使用的前端开发环境应该是怎样的？ 构建我们需要发布的html，css ,js 文件 使用css 预处理器来编写样式 处理压缩图片 使用Bable支持ES新特性 本地提供静态环境开发调试 二、关联HTML webpack 默认从作为入口的 .js 文件进行构建（更多是基于 SPA 去考虑），但通常一个前端项目都是从一个页面（即 HTML）出发的，最简单的方法是，创建一个 HTML 文件，使用 script 标签直接引用构建好的 JS 文件 < script src ="./dist/bundle.js" ></ script > 但是，如果我们的文件名或者路径会变化,so 我们使用 html-webpack-plugin 插件 html-webpack-plugin 是一个独立的 node package，所以在使用之前我们需要先安装它，把它安装到项目的开发依赖中： npm install html-webpack-plugin -D 然后在 webpack 配置中，将 html-webpack-plugin 添加到 plugins 列表中：（默认版配置） cosnt HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { //...

一.模块加载器 1.broserify 模块加载器, 只能加载js 2.webpack 模块加载器, 一切东西都是模块, 最后打包到一块 .vue文件 ==> 需要用webpack编译成浏览器可读文件 vue组件代码, 三块代码 1. <template></template> ==> 放html 2. <style></style> ==> 放css 3. <script></script> ==> js代码 二.不使用vue-cli来创建, 手动创建 1..初如化package.json & npm init --yes // 默认 生成vue-loader-demo目录 F:\learning\znsvue>md vue-loader-demo 删除目录 F:\learning\znsvue> del vue-loader-demo3 2.vue-loader-demo创建以下文件 |-index.html 　　　　　　首页 |-main.js 入口js文件 |-App.vue vue文件(第一个字母大写, 官方推荐命名法) |-package.json 工程文件(项目依赖, 名称, 配置) |-webpack.config.js webpack配置文件 |-components/Menu.vue 公用html 　　 3.webpack准备工作 App.vue ==>

react-native-storage 这是一个本地持久存储的封装，可以同时支持react-native(AsyncStorage)和浏览器(localStorage)。ES6语法，promise异步读取，使用jest进行了完整的单元测试。 安装 npm install react-native-storage –save 使用说明 配置 Web开发 对于Web开发你需要使用 webpack 和 babel 来支持es6模块导入功能。 在webpack的配置中添加如下几行： // ... module: { loaders: [ // ... { test: /\.js?$/ , include: [ // path.join(__dirname, '你自己的js文件路径'), // path.join(__dirname, 'node_modules/其他需要babel的第三方库'), path.join(__dirname, 'node_modules/react-native-storage' ) ], loader: 'babel' , query: { cacheDirectory: true , presets: [ 'es2015' , 'stage-1' , 'react' ], plugins: [ 'transform-runtime' ] } } ] }

子曰：从0 开始搭建React 应用 本文翻译自 Jedai Saboteur creating a react app from scratch React 并不是 真正意义上 的开箱即用。node（截至我们在本教程中使用的v.9.3.0 版本）还没有完全支持，React 使用的关键字和语法。它需要相当多繁琐的设置才能弄清楚，因此Facebook 提供了一个选项，可以轻松启动React应用程序。 问题是， create-react-app 抽象了很多让React 应用程序的工作 -- 至少没有弹出它可以手动调整的选项。你想要自己实现的原因有很多，至少要知道它在做什么。 我说过，启动React 应用程序有几个障碍。首先是node 无法处理所有语法（例如 import/export 和 jsx ）。第二个问题是，你需要构建文件或在开发过程中以某种方式为你的应用程序提供服务 -- 这在后一种情况下尤为重要。 幸运的是，我们可以使用 Babel 和 Webpack 处理这些问题。 设置 首先，为React 应用程序创建一个新目录。 然后，使用 npm init 初始化项目，并在你选择的编辑器中打开它。这是也可以 git init 。在新项目文件夹中，创建以下结构： . +-- public +-- src 稍微考虑一下，我们最终想要构建我们的应用程序