项目运行
1.开启服务器: npm run dev
2.打包文件: npm run build
3.github:https://github.com/PlusLius/-devServer-ES6-.git
4.如果觉得有用的话,请给个start,后面将继续更新,如果有错误知错还请指出,谢谢!
安装包的作用
1. "clean-webpack-plugin"和"html-webpack-plugin"这两个包来帮助我们完成shell操作(dist文件的添加和删除,以及html自动插入绑定)
2. 开启我们的webpack服务器
3. "webpack-merge"用来对我们的开发环境和生 产环境对webpack基础配置进行扩展
4. 打包文件的压缩
"devDependencies": {
"clean-webpack-plugin": "^0.1.17",
"html-webpack-plugin": "^2.30.1",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0",
"uglifyjs-webpack-plugin": "^0.4.6",
}
先让我们的脚手架支持ES6
- 配置文件.babelrc
- prestets字段的作用是用来设置转码规则
//.babelrc
# ES2015转码规则
babel-preset-es2015
# ES7不同阶段语法提案的转码规则(共有4个阶段)
babel-preset-stage-0
babel-preset-stage-1
babel-preset-stage-2
babel-preset-stage-3
#下载完这些包后,填入presets字段
{
"presets": [
"es2015",
"stage-2"
],
"plugins": []
}
babel-ployfill 让Babel支持新的API,如Symbol、Promise等,
#为当前环境安装一个垫片(babel-ployfill)
$ npm install --save babel-polyfill
#安装好后就可以在文件头部中引入
import 'babel-polyfill';
babel-register 使用require时会先调用Babel进行转码
$ npm install --save-dev babel-register
require("babel-register");
require("./index.js");
#babel-register只会对require命令加载的文件转码,
而不会对当前文件转码
babel-core 如果某些代码需要调用Babel的API进行转码,就要使用babel-core模块。
$ npm install babel-core --save
var babel = require('babel-core');
// 字符串转码
babel.transform('code();', options);
// => { code, map, ast }
// 文件转码(异步)
babel.transformFile('filename.js', options, function(err, result) {
result; // => { code, map, ast }
});
Browserslist 在不同的前端工具之间共享支持的浏览器列表的库。它用于:
1.Autoprefixer
2.babel-preset-env (external config in package.json or browserslist files supported in 2.0)
3.eslint-plugin-compat
4.stylelint-no-unsupported-browser-features
5.postcss-normalize
babel-preset-env babel-preset-env 会根据配置的 env 只编译那些还不支持新的特性。
优化.babelrc,不支持ES6的一些新特性的
浏览器我们才去编译成ES5
详细:https://github.com/babel/babel-preset-env
配置项:
targets.node 支持到哪个版本的 node
targets.browsers 支持到哪个版本的浏览器
loose 启动宽松模式,配合 webpack 的 loader 使用
modules 使用何种模块加载机制
debug 开启调试模式
include 包含哪些文件
exclude 排除哪些文件
useBuiltIns 是否对 babel-polyfill 进行分解,只引入所需的部分
{
"presets":[
["env",{
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}]
],
"plugins":["transform-runtime"]
}
plugins字段中,transform-runtime的作用
1.使用它可以增强代码的使用性,如果使用了新的一些api会造成全局污染如:promise,set,map
2.可以不用require来使用来使用这些新的api
3.配置参数:
辅助(helpers)
默认值是:true
表示是否开启内联的babel helpers(即babel或者环境本来的存在的垫片或者某些对象方法函数)(clasCallCheck,extends,etc)在调用模块名字(moduleName)时将被替换名字。
垫片/polyfill
默认值是:`true'
表示是否把内置的东西(Promise,Set,Map,tec)转换成非全局污染垫片。
重新生成/regenerator
默认值是:true
是否开启generator函数转换成使用regenerator runtime来避免污染全局域。
模块名字/moduleName
默认值:babel-runtime
当调用辅助(内置垫片)设置模块(module)名字/路径.
详细:https://segmentfault.com/a/1190000009065987
{
"presets":[
["env",{
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}]
],
"plugins":["transform-runtime"]
}
env字段的作用,使用环境变量,对不同环境使用不同的配置
1.该env的键将会去找process.env.BABEL_ENV,当找不到,则使用process.env.NODE_ENV,如果不可用,则默认为"development"。
2.如果希望在平台上工作,可以使用 cross-env包
在终端中执行了类似这样了命令后BABEL_ENV=production YOUR_COMMAND_HERE,就会执行下面的环境
{
"env": {
"production": {
"plugins": ["transform-react-constant-elements"]
}
}
}
//那我们可以给测试环境配置编译环境
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["istanbul"]
}
}
babel-loader配置
//详细说明
http://babeljs.io/docs/setup/#installation
//webpack.base.js
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
}
参考链接
1.http://www.jianshu.com/p/41d3f7768095
2.https://github.com/jakwuh/babel-plugin-transform-runtime
3.https://segmentfault.com/a/1190000009065987
4.https://segmentfault.com/p/1210000008466178
5.http://www.jianshu.com/p/ff7e0de573a9
6.http://babeljs.io/docs/usage/babelrc/
7.http://www.jianshu.com/p/1e402922ee32
8.http://www.ruanyifeng.com/blog/2016/01/babel.html
9.https://github.com/gotwarlost/istanbul
让我们的脚手架支持vue
vue-loader详细文档
https://vue-loader.vuejs.org/zh-cn/
在运行环境,我们必须拿完整版本渲染
详细:https://segmentfault.com/q/1010000010380119
template字段的作用是以我们注册的根组件为模版进行渲染
compoents字段的作用是注册一个根组件
import Vue from 'vue/dist/vue.js';
import Plus from './plus'
new Vue({
el: '#app',
template: '<Plus/>',
components: { Plus }
})
// vue模版的编译需要基于一下loader作为支持
"vue-loader":"^13.0.5",
"vue-style-loader": "^3.0.3",
"vue-template-compiler": "^2.4.4",
"css-loader": "^0.28.7",
参考文档
https://vue-loader.vuejs.org/zh-cn/
https://segmentfault.com/q/1010000010380119