babel

一、兼容ES6 Vue 的核心框架 vuejs 本身，以及官方核心插件（VueRouter、Vuex等）均可以在 ie9 上正常使用。但ie不兼容es6，所以需要安装插件将“Promise”等高级语法转换成ie可以识别的es5。 　　报错：ReferenceError: “Promise”未定义，页面空白 　　报错：app.js文件报错页面空白，可能是缺少配置文件.babelrc 一、 babel-polyfill npm install babel-polyfill --save 　　在main.js中的最前面引入import 'babel-polyfill'（注：必须引入在最前面，保证所有es6语法都会被解析） 　　下载完成后找到build文件夹下的webpack.base.conf.js下的一段代码 module.exports = { 　　entry: { 　　　　app: './src/main.js' 　　}, 替换为 module.exports = { context: path.resolve(__dirname, '../'), entry: { 　　app: ["babel-polyfill", "./src/main.js"], } 二、如果引入 babel-polyfill还有一些高级语法没有被编译，配置 .babelrc文件，官网如下： https:/

elementUI table表格一般的样式是这样的： 但是要改变表头是比较麻烦的一个事情，但是往往有些项目是需要的比如改成如下样式： 一般直接改起来挺麻烦，好在官网提供了一个方法： render-header 参数 说明 类型 可选值 默认值 render-header 列标题 Label 区域渲染使用的 Function Function(h, { column, $index }) — — 根据官方的方法来实现有两个方法： 方法一：vue的render函数来直接实现 <template> <div> <h2 align= " center " >自定义表头样式</h2> <el-table :data= " tableData " border stripe> <el-table-column prop= " name " label= " 姓名 " align= " center " :render-header= " renderHeader " > </el-table-column> <el-table-column prop= " date " label= " 日期 " align= " center " > </el-table-column> <el-table-column prop= " address " label= " 地址 " align= "

1. Tree-shaking只对ES Module起作用，对于commonjs无效，对于umd亦无效 因为tree-shaking是针对静态结构进行分析，只有import和export是静态的导入和导出。而commonjs有动态导入和导出的功能，无法进行静态分析。 如下代码，只有运行代码的时候才能知道导入的内容； // 运行时才知道的导入内容 var my_lib; if (Math.random()) { my_lib = require('foo' ); } else { my_lib = require('bar' ); } // 运行时才知道的导出的内容 if (Math.random()) { exports.baz = function baz(){}; } 2. babel编译默认将模块转换为commonjs，需要配置.babelrc的{module:false} 和 package.json的{sideEffects: false}才可以进行tree-shaking 3. rollup的tree-shaking比webpack的要强一些 4. webpack4默认开启tree-shaking，具体可参考 webpack4的tree-shaking 来源： oschina 链接： https://my.oschina.net/u/4356138/blog

本篇写的是优化方案，查看基础配置的话可以前往这里 juejin.im/post/5e6e01… webpack优化 缓存配置 babel-loader自带的缓存 { test : /\.js$/ , use :[ 'babel-loader?cacheDirectory=true' ] } 复制代码 使用cache-loader 下载包 cnpm install cache-loader --save { test :/\.js$/, use:[ 'cache-loader' ] } 复制代码 多进程打包（1）happypck 下载包 cnpm install happypack os --save happy启用进程池，设置数量一般为设备cup总数，在loader处指定id作为一个实例，在plugin处进行单独处理 const HappyPack = require ( 'happypack' ); const os = require ( 'os' ); module .exports = { module :{ rules :[{ test : /\.js$/ , use :[ 'happypack/loader?id=js' ] }] }, plugins :[ new HappyPack({ id : 'js' , //这里loaders配置与之前的loader一致

接着 从0开始搭建vue+webpack脚手架（一） 三、配置webpack-dev-server 　　1. webpack-dev-server自带一个node的服务器， 项目在服务端运行的同时可以实现热更新加载 　　2. 安装兼容环境变量的包 cross-env 　　（1）原因： 构建项目时分生产环境和开发环境，此时webpack需要配置production和development模式，需要使用一个变量来作条件判断，而不同的平台上设置环境变量方式不同，在Mac平台是 NODE_ENV=production 而windows平台上是set NODE_ENV=production,，所以需要使用cross-env 　　（2）安装 1 $ npm i -D cross-env 　　（3）将package.json运行脚本改为如下： 1 "scripts" : { 2 "test": "echo \"Error: no test specified\" && exit 1" , 3 "build": "cross-env NODE_ENV=production webpack --progress --colors" , 4 "dev": "cross-env NODE_ENV=development webpack-dev-server --colors --modules -

webpack 4 is out! The popular module bundler gets a massive update. webpack 4, what’s new ? A massive performance improvement , zero configuration and sane defaults . This is a living, breathing introduction to webpack 4 . Constantly updated. You’ll build a working webpack 4 environment by following each section in order . But feel free to jump over the tutorial! Table of Contents webpack 4 as a zero configuration module bundler webpack is powerful and has a lot of unique features but one of its pain point is the configuration file . Providing a configuration for webpack is not a big deal in