工程实战-ES6环境配置

novo 发布于2019-08-22 14:03 / 417人阅读

摘要：最近在学习语法，故有了从零开始搭建环境的想法。默认会将这些辅助函数内联到每一个文件里，这样文件多的时候，项目就会很大。

最近在学习ES6语法，故有了从零开始搭建ES6环境的想法。下面第一部分是单纯的ES6环境配置，第二部分是基于webpack环境的工程配置

1. 纯ES6环境配置 1.1 packages中的依赖项：

"devDependencies": {
  "babel-cli": "^6.26.0",
  "babel-plugin-transform-runtime": "^6.23.0",
  "babel-polyfill": "^6.26.0",
  "babel-preset-env": "^1.6.1",
  "babel-preset-stage-0": "^6.24.1"
}

（1）babel-cli: 用于命令行转码

（2）babel-preset-env：将基于你的实际浏览器及运行环境，自动的确定babel插件及polyfills，转译ES2015及此版本以上的语言

（3）babel-polyfill： babel支持ES6语法部分的编译，对于新增的类还需安装额外的polyfill

（4）babel-preset-stage-0：为了支持async/await，这个是es7的语法

（5）babel-plugin-transform-runtime:在转换 ES2015 语法为 ECMAScript 5 的语法时，babel 会需要一些辅助函数，例如 _extend。babel 默认会将这些辅助函数内联到每一个 js 文件里，这样文件多的时候，项目就会很大。所以 babel 提供了 transform-runtime 来将这些辅助函数“搬”到一个多带带的模块 babel-runtime 中，这样做能减小项目文件的大小

1.2 .babelrc配置

{
  "presets": [
    ["env", { "modules": false }],
    "stage-0"
  ],
  "plugins": ["transform-runtime"]
}

presets 中 env 标识：将基于你的实际浏览器及运行环境
其中 modules有以下选项

"amd" | "umd" | "systemjs" | "commonjs" | false, defaults to "commonjs".

Enable transformation of ES6 module syntax to another module type.

Setting this to false will not transform modules.

1.3 packages.json文件添加script

"scripts": {
  "compile": "babel src --out-dir dist"
}

compile: babel src --out-dir dist 用于将src文件夹中的文件使用babel编译到dist文件夹

2. ES6在webpack中的配置 2.1 packages中的依赖项

"devDependencies": {
  "babel-core": "^6.26.0",
  "babel-loader": "^7.1.2",
  "babel-plugin-transform-runtime": "^6.23.0",
  "babel-polyfill": "^6.26.0",
  "babel-preset-env": "^1.6.1",
  "babel-preset-stage-0": "^6.24.1",
  "webpack": "^3.10.0",
  "webpack-dev-server": "^2.11.1"
}

在webpack中的配置，对比上面的 babel-plugin-transform-runtime babel-preset-env babel-polyfill babel-preset-stage-0 四项是没有变化的

（1）babel-core 提供babel转化的核心语法，上面的babel-cli已包涵，由于在webpack中不需要指令，直接引入core即可

（2）babel-loader 将babel转化为webpack能够转化的文件

（3）webpack webpack-dev-server webpack包及服务

2.2 .babelrc配置

与上面相同

2.3 webpack.config.js配置

const path = require("path")

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    publicPath: "/dist/",
    filename: "build.js"
  },
  module: {
    loaders: [
      {
          test: /.js$/,
          loader: "babel-loader",
          exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ["*", ".js", ".vue", ".json"]//后缀名自动补全
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {// 配置如何展示性能提示(false不提示)
    hints: false
  },
  devtool: "#eval-source-map"
}

2.4 packages.json文件添加script

"scripts": {
  "dev": "webpack-dev-server --open --hot"
}

webpack-dev-server 启动服务
--open 自动打开
--hot 启动热更新

2.5 最终工程目录

.
├── dist
├── index.html
├── node_modules
├── package.json
├── src
└── webpack.config.js

GPU云服务器云服务器环境配置网站环境配置虚机配置环境高级环境配置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92817.html

工程实战-vue在vscode的环境配置

摘要：基础开发插件图标美化调试代码格式化代码格式化代码规范语法提示必备及相关技术栈语法提示文件高亮格式化编码支持自动闭合标签自动更改对应标签名自动补全路径本地项目管理右击在浏览器打开文件支持支持友好化配置基础设置设置设置设置设置设置配 1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Pretti...

solocoder 2019-08-21 18:22 评论0 收藏0
从 0 开始，vue 项目实战（一）

摘要：前言从开始开发一个的项目。下载首先需要下载一个命令行工具，话说我是电脑管家里面直接下载的，也可以点这里下载如果有的话就不需要了，自带的命令行也是可以的。使用命令行然后新建个文件夹放你的项目，进入文件夹，右键打开命令行工具。前言从 0 开始开发一个 vue 的 SPA 项目。如果你还没有学习过 vue，请先按照官网或者社区的教程做一遍。像这样，做几个例子，不然的话看这篇文章的...

wawor4827 2019-08-22 10:45 评论0 收藏0
个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

sherlock221 2019-08-20 18:59 评论0 收藏0
webpack实战

摘要：和类似的预处理器还有等。的用处非常多，包括给自动加前缀使用下一代语法等，目前越来越多的人开始用它，它很可能会成为预处理器的最终赢家。 webpack实战查看所有文档页面：全栈开发，获取更多信息。快马加鞭，加班加点，终于把这个文档整理出来了，顺便深入地学习一番，巩固知识，就是太累人，影响睡眠时间和质量。极客就是想要把事情做到极致，开始了就必须到达终点。原文链接：webpack实战，原...

cyrils 2019-08-22 17:32 评论0 收藏0