hackftz

hackftz 查看完整档案

上海编辑  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑

bits change world

个人动态

hackftz 赞了文章 · 10月14日

Webpack 5 正式发布

Webpack简介

随着前端发展如日冲天,前端项目也越来越复杂,得益于Nodejs的发展,前端模块化、组件化、工程化也大势所趋。伴随着前端的模块化和工程化,Grunt、Gulp到Webpack等项目构建和打包工具也随之出现。

前端工程化的早期,主要是解决重复任务的问题。Grunt、Gulp就是其中代表,他们的主要功能是完成文件压缩、编译less、sass、地址添加hash、替换等。不过,随着前端工程化的发展,Webpack出现了,与其说是一个工程构建工具,Webpack更像是一套前端工程化解决方案。

根据官方资料介绍,Webpack 是一个前端资源加载和打包工具。所谓的模块就是在平时的前端开发中,用到一些静态资源,如JavaScript、CSS、图片等文件,Webpack就将这些静态资源文件称之为模块。 Webpack支持AMD和CommonJS,以及其他的一些模块系统,并且兼容多种JS书写规范,可以处理模块间的依赖关系,所以具有更强大的JS模块化的功能,它能对静态资源进行统一的管理以及打包发布。作为一款 Grunt和Gulp的替代产品,Webpack受到大多数开发者的喜爱,因为它能够编译打包CSS,做CSS预处理,对JS的方言进行编译,打包图片,代码压缩等等。

Webpack 5

自2018 年 2 月Webpack4 发布以来,Webpack 就一直没有更进一步的重大更新,为了保持 API 的一致性,旧的架构没有做太多改变,遗留了很多的包袱。或许是沉寂太久,2020 年 10 月 10 日,Webpack 正式发布了 5.0 版本。Webpack 5带来了哪些新的特性呢?

  • 尝试用持久性缓存来提高构建性能。
  • 尝试用更好的算法和默认值来改进长期缓存。
  • 尝试用更好的 Tree Shaking 和代码生成来改善包大小。
  • 尝试改善与网络平台的兼容性。
  • 尝试在不引入任何破坏性变化的情况下,清理那些在实现 v4 功能时处于奇怪状态的内部结构。
  • 试图通过现在引入突破性的变化来为未来的功能做准备,尽可能长时间地保持在 v5 版本上。

下面就让我们来看一下,Webpack 5带来的一些新的特性。

1, 清除过期功能

1.1 清理已弃用的功能

所有在 Webpack 4 标记即将过期的功能,都已在该版移除。因此在迁移到 Webpack 5 之前,请确保你在 Webpack 4 运行的构建不会有任何的功能过期警告,否则迁移到Webpack 5之后就会报错。

1.2 不再为Node.js 模块自动引用Polyfills

在 Webpack 4 或之前的版本中,任何项目引用 Node.js 内置模块都会自动添加 Polyfills,Polyfills是一个语法检查的模版工具。不过,Webpack 5不再为 Node.js 内置模块自动添加 Polyfills,Webpack 5会投入更多的精力到前端模块的兼容性工作中。

如果你的代码中有引用这些 Node.js 的模块,当需要升级到 Webpack 5版本时, 请将尽量使用前端的模块,或者自行手动添加适合的 Polyfills。

2. 针对长期缓存的优化

2.1 确定的 Chunk、模块 ID 和导出名称

Webpack 5新增了长期缓存的算法,这些算法在生产模式下是默认启用的,语法格式如下。

chunkIds: "deterministic" 
moduleIds: "deterministic"
mangleExports: "deterministic"

该算法以确定性的方式为模块和分块分配短的(3 或 5 位)数字 ID,这是包大小和长期缓存之间的一种权衡。由于这些配置将使用确定的 ID 和名称,这意味着生成的缓存失效不再更频繁。

2.2 真正的内容哈希

当使用[contenthash]时,Webpack 5 将使用真正的文件内容哈希值。之前它 "只 "使用内部结构的哈希值。当只有注释被修改或变量被重命名时,这对长期缓存会有积极影响。这些变化在压缩后是不可见的。

3. 更好的开发支持

在开发模式下,默认启用的新命名代码块 ID 算法为模块(和文件名)提供了人类可读的名称。
模块 ID 由其路径决定,相对于 context。代码块 ID 由代码块的内容决定。

所以你不再需要使用import(/* webpackChunkName: "name" */ "module")来调试。但如果你想控制生产环境的文件名,还是有意义的。

可以在生产环境中使用 chunkIds: "named" 在生产环境中使用,但要确保不要不小心暴露模块名的敏感信息。如果你不喜欢在开发中改变文件名,你可以通过 chunkIds: "natural" 来使用旧的数字模式。

3.2 模块联邦

Webpack 5 增加了一个新的功能 "模块联邦",它允许多个 Webpack 一起工作。从运行时的角度来看,多个构建的模块将表现得像一个巨大的连接模块图。从开发者的角度来看,模块可以从指定的远程构建中导入,并以最小的限制来使用。

4. 对Web 平台功能的全新支持

4.1 JSON 模块

比如对 JSON 模块,会与现在的提案保持一致,并且要求进行默认的导出,否则会有警告信息。即使使用默认导出,未使用的属性也会被 optimization.usedExports 优化丢弃,属性会被 optimization.mangleExports 优化打乱。

如果想用自定义的 JSON 解析器,可以在 Rule.parser.parse 中指定一个自定义的 JSON 解析器来导入类似 JSON 的文件(如toml、yaml、json5 等)。

4.2 资源模块

Webpack 5 现在已经对表示资源的模块提供了内置支持。这些模块可以向输出文件夹发送一个文件,或者向 Javascript 包注入一个 DataURI。 无论哪种方式,它们都会给出一个 URL 来让程序正常工作。

import url from "./image.png" //老方法
new URL("./image.png", import.meta.url)  //新方法

选择 "新的方式 "语法是为了允许在没有打包工具的情况下运行代码。这种语法也可以在浏览器中的原生 ECMAScript 模块中使用。

4.3 原生 Worker 支持

当把资源的 new URLnew Worker/new SharedWorker/navigator.serviceWorker.register 结合起来时,Webpack 会自动为 Web Worker 创建一个新的入口点(entrypoint),如下所示。

new Worker(new URL("./worker.js", import.meta.url))

选择这种语法也是为了允许在没有打包工具的情况下运行代码。这种语法在浏览器的原生 ECMAScript 模块中也可以使用。

4.4 URIs

Webpack 5 支持在请求中处理网络协议,比如:

  • 支持data:支持 Base64 或原始编码。Mimetype 可以在module.rule中被映射到加载器和模块类型。例如:import x from "data:text/javascript,export default 42"。
  • 支持file:支持file文件类型。

支持http(s):需要通过new webpack.experiments.s schemesHttp(s)UriPlugin()选择加入。

4.5 异步模块

Webpack 5 支持所谓的 "异步模块"。这些模块并不是同步解析的,而是基于异步和 Promise 的。通过import 导入它们会被自动处理,不需要额外的语法,而且几乎看不出区别。通过require()导入它们会返回一个解析到导出的 Promise。在 Webpack 中,有多种方式来拥有异步模块,常见的方式如下:

  • 异步的外部资源(async externals)
  • 新规范中的 WebAssembly 模块
  • 使用顶层 Await 的 ECMAScript 模块。

4.6 外部资源

Webpack 5 增加了更多的外部类型来支持更多的应用。
promise: 一个评估为 Promise 的表达式,外部模块是一个异步模块,解析值作为模块导出使用。
import:原生的 import() 用于加载指定的请求,外部模块是一个异步模块,解析值作为模块导出,外部模块是一个异步模块。
module:尚未实现,但计划通过 import x from "..." 加载模块。
script:通过 <script> 标签加载一个 url,并从一个全局变量(以及它的可选属性)中获取输出。外部模块是一个异步模块。

5. 开发体验上的提升

5.1 经过优化的构建目标(target)

Webpack 5 允许传递一个目标列表,并且支持目标的版本。例如 :

target: "node14" 
target: ["web", "es2020"]。

这是一个简单的方法,为 webpack 提供它需要确定的所有信息:代码块加载机制,以及支持的语法,如箭头函数。

5.2 统计格式

改进了统计测试格式的可读性和冗余性。改进了默认值,使其不那么冗长,也适合大型构建。

5.3 进度

ProgressPlugin插件也做了一些优化,现在不仅可以统计模块编译的进度,也可以统计 入口 和 依赖。并且,之前展示进度可能会对构建性能有一定的影响,这次的升级也做了一些性能方面的优化。

5.4 自动添加唯一命名

在 Webpack 4 中,多个 Webpack 同时运行时可能会在同一个 HTML 页面上发生冲突,因为它们使用同一个全局变量进行代码块加载。为了解决这个问题,需要为 output.jsonpFunction 配置提供一个自定义的名称。

同时,Webpack 5 会从 package.json name 中自动推断出一个唯一的构建名称,并将其作为 output.uniqueName 的默认值。由于 package.json 中有唯一的名称,可将 output.jsonpFunction删除。

5.5 自动添加公共路径

Webpack 5 会在可能的情况下自动确定 output.publicPath,无需开发者手动确认。

5.6 Typescript 类型

Webpack 5 可以从源码中生成 typescript 类型,并通过 npm 包暴露它们。如果要迁移到Webpack 5版本,需要删除 @types/webpack

6. 构建优化

6.1 嵌套的 tree-shaking

现在,Webpack能够跟踪对导出的嵌套属性的访问,因此可以改善重新导出命名空间对象时的 Tree Shaking(清除未使用的导出和混淆导出),如下所示。

// inner.js
export const a = 1;
export const b = 2;

// module.js
export * as inner from './inner';
// 或 
import * as inner from './inner'; export { inner };

// user.js
import * as module from './module';
console.log(module.inner.a);

6.2 内部模块 tree-shaking

Webpack 4 没有分析模块的导出和引用之间的依赖关系,Webpack 5 有一个新的选项 optimization.innerGraph,在生产模式下是默认启用的,它可以对模块中的标志进行分析,找出导出和引用之间的依赖关系。

import { something } from './something';

function usingSomething() {
  return something;
}

export function test() {
  return usingSomething();
}

内部依赖图算法会找出 something 只有在使用 test 导出时才会使用。这允许将更多的出口标记为未使用,并从代码包中省略更多的代码。

当设置"sideEffects": false时,可以省略更多的模块。在这个例子中,当 test 导出未被使用时,./something 将被省略。要获得未使用的导出信息,需要使用 optimization.unusedExports。要删除无副作用的模块,需要使用optimization.sideEffects。可以分析以下标记:

  • 函数声明
  • 类声明
  • 默认导出export default 或定义变量以下的
    1,函数表达式

2,类表达式
3,顺序表达式
4,/#__PURE__/ 表达式
5,局部变量
6,引入的捆绑(bindings)

使用 eval() 将为一个模块放弃这个优化,因为经过 eval 的代码可以引用范围内的任何标记。这种优化也被称为深度范围分析。

6.3 CommonJs Tree Shaking

曾经,Webpack不支持对 CommonJs进行 导出和 require() 调用时的导出使用分析。现在,Webpack 5 增加了对一些 CommonJs 构造的支持,允许消除未使用的 CommonJs 导出,并从 require() 调用中跟踪引用的导出名称。

支持的构造如下:

  • exports|this|module.exports.xxx = ...
  • exports|this|module.exports = require("...") (reexport)
  • exports|this|module.exports.xxx = require("...").xxx (reexport)
  • Object.defineProperty(exports|this|module.exports, "xxx", ...)
  • require("abc").xxx
  • require("abc").xxx()
  • 从 ESM 导入
  • require() 一个 ESM 模块
  • 被标记的导出类型 (对非严格 ESM 导入做特殊处理)
  • 未来计划支持更多的构造

6.4 开发与生产的一致性问题

Webpack正在通过改善开发模式很晚生产模式的相似性,并在开发模式上提升构建性能,避免仅在生产模式的产生的问题之间找到一个很好的平衡点。

Webpack 5 默认在两种模式下都启用了 "sideEffects "优化。在 Webpack 4 中,由于 package.json 中的"sideEffects"标记不正确,这种优化导致了一些只在生产模式下出现的错误。r如果在开发过程中启用这个优化,可以更快更容易地发现这些问题。

在很多情况下,开发和生产都是在不同的操作系统上进行的,文件系统的大小写敏感度不同,所以 Webpack 5 增加了一些奇怪的大小写的警告/错误。

6.5 改进 target 配置

在 Webpack 4 中,"target "是在 "web" 和 "node" 之间的一个粗略的选择(还有一些其他的)。Webpack 5 给开发者留下了更多的选择。target选项现在比以前影响了更多关于生成代码的事情,比如代码块加载方法、代码块的格式、externals 是否默认被启用等等。

此外,对于其中的一些情况,在 "web" 和 "node" 之间的选择过于粗略,我们需要更多的信息。因此,我们允许指定最低版本,例如 "node10.13",并推断出更多关于目标环境的属性。

现在Webpack也允许用一个数组组合多个目标,webpack 将确定所有目标的最小属性。使用数组也很有用,当使用像 "web" 或 "node" 这样没有提供完整信息的目标时(没有版本号)。例如,["web", "es2020"] 结合了这两个部分目标。

有一个目标 "browserslist",它将使用 browserslist 类库的数据来确定环境的属性。当项目中存在可用的 browserslist 配置时,这个目标也会被默认使用。当没有可用的配置时,默认使用 "web" 目标。

6.6 代码块拆分与模块大小

现在,Webpack 支持对模块按照大小进行拆分。SplitChunksPlugin 插件知道如何处理这些不同模块的大小,并为它们设置 minSize 和 maxSize,如下所示。

module.exports = {
  optimization: {
    splitChunks: {
      minSize: {
        javascript: 30000,
        webassembly: 50000,
      },
    },
  },
};

7.性能优化

7.1 持久缓存

现在有一个文件系统缓存,它是可选的,可以通过以下配置启用。

module.exports = {
  cache: {
    // 1. 将缓存类型设置为文件系统
    type: 'filesystem',

    buildDependencies: {
      // 2. 将你的config 添加为 buildDependency,以便在改变 config 时获得缓存
      config: [__filename],
      // 3. 如果有其他的东西需要被构建依赖,可以在这里添加它们
      // 注意,webpack、加载器和所有从你的配置中引用的模块都会被自动添加
    },
  },
};

说明:
默认情况下,Webpack 假定 Webpack 所在的 node_modules 目录只被包管理器修改,对 node_modules 来说,哈希值和时间戳会被跳过。出于性能考虑,只使用包名和版本。只要不指定resolve.symlinks: falseSymlinks(即npm/yarn link)就没有问题(无论如何都要避免)。不要直接编辑 node_modules 中的文件,除非你用 snapshot.managedPaths: []以剔除该优化。当使用 Yarn PnP 时,webpack 假设 yarn 缓存是不可改变的(通常是这样),此时可以使用 snapshot.immutablePaths: [] 来退出这个优化。

缓存将默认存储在 node_modules/.cache/webpack(当使用 node_modules 时)或 .yarn/.cache/webpack(当使用 Yarn PnP 时)中。当所有的插件都正确处理缓存时,你可能永远都不需要手动删除它。

许多内部插件也会使用持久性缓存。例如 SourceMapDevToolPlugin (缓存 SourceMap 的生成)或 ProgressPlugin (缓存模块数量)

持久性缓存将根据使用情况自动创建多个缓存文件,以优化对缓存的读写访问。默认情况下,时间戳将用于开发模式的快照,而文件哈希将用于生产模式。文件哈希也允许在 CI 中使用持久性缓存。

7.2 编译器闲置和关闭

编译器现在需要在使用后关闭。编译器现在会进入和离开空闲状态,并且有这些状态的钩子。插件可能会使用这些钩子来做不重要的工作。(即将持久缓存缓慢地将缓存存储到磁盘上)。在编译器关闭时--所有剩余的工作应该尽可能快地完成。一个回调标志着关闭完成。

插件和它们各自的作者应该预料到,有些用户可能会忘记关闭编译器。所以,所有的工作最终也应该在空闲状态下完成。当工作正在进行时,应该防止进程退出。webpack() 用法在被传递回调时自动调用close。

7.3 文件生成

Webpack 过去总是在第一次构建时发出所有的输出文件,但在增量(观察)构建时跳过了写入未更改的文件。假设在 Webpack 运行时,没有任何其他东西改变输出文件。
增加了持久性缓存后,即使在重启 Webpack 进程时,也会有类似监听的体验。所以,现在Webpack 会检查输出目录中现有的文件,并将其内容与内存中的输出文件进行比较,只有当文件被改变时,它才会执行写入文件操作。
这只在第一次构建时进行。任何增量构建都会在运行中的 webpack 进程中生成新的资产时写入文件。

8. 重大问题

8.1 单一文件目标的代码分割

只允许启动单个文件的目标(如 node、WebWorker、electron main)现在支持运行时自动加载引导所需的依赖代码片段。因此,允许对这些目标使用 chunks: "all"optimization.runtimeChunk
请注意,如果目标的代码块加载是异步的,这使得初始评估也是异步的。当使用 output.library 时,这可能是一个问题,因为现在导出的值是一个 Promise处理后的值。

8.2 新的解析器

enhanced-resolve 更新到了 v5,有以下改进:

  • 追踪更多的依赖关系,比如丢失的文件。
  • 别名可能有多种选择
  • 现在可以别名为 false 了。
  • 支持 exports 和 imports 字段等功能。
  • 性能提高

8.3 没有 JS 的代码块

不包含 JS 代码的块,将不再生成 JS 文件。这就允许有只包含 CSS 的代码块。

9.未来计划

9.1 实验特性

在 webpack 5 中,有一个新的 experiments 配置选项,允许启用实验性功能。这使得哪些功能被启用/使用变得很清楚。

虽然 webpack 遵循语义版本化,但它会对实验性功能进行例外处理。实验性功能可能会在 webpack 的次要版本中包含破坏性的变化。当这种情况发生时,我们会在变更日志中添加一个明确的注释。这将使我们能够更快地迭代实验性功能,同时也使我们能够在主要版本上为稳定的功能停留更长时间。

并且,以下的实验功能也会随 Webpack 5 一起发布。

  • 旧的 WebAssembly 支持,就像 Webpack 4 一样 (experiments.syncWebAssembly)
  • 根据更新的规范(experiments.asyncWebAssembly),新增 WebAssembly 支持。这使得一个 WebAssembly 模块成为一个异步模块。
  • 顶层的 Await第三阶段提案(experiments.topLevelAwait)在顶层使用 await 使该模块成为一个异步模块。
  • 以模块的形式生成代码包 (experiments.outputModule)这就从代码包中移除了包装器 IIFE,执行严格模式,通过 <script type="module"> 进行懒惰加载,并在模块模式下最小化压缩。

9.2 最小 Node.js 版本

最低支持的 Node.js 版本从 6 增加到 10.13.0(LTS)。

10.内部架构变更

下面是一些Webpack 5架构方面的变更:

10.1 新的插件运行顺序

现在 webpack 5 中的插件在应用配置默认值之前就会被应用。这使得插件可以应用自己的默认值,或者作为配置预设。但这也是一个突破性的变化,因为插件在应用时不能依赖配置值的设置。
迁移:只在插件钩子中访问配置。或者最好完全避免访问配置,并通过构造函数获取选项。

10.2 运行时模块

大部分的运行时代码被移到了所谓的"运行时模块"中。这些特殊模块负责添加运行时代码。它们可以被添加到任何块中,但目前总是被添加到运行时块中。
"运行时需求"控制哪些运行时模块(或核心运行时部件)被添加到代码包中。这确保了只有使用的运行时代码才会被添加到代码包中。未来,运行时模块也可以添加到按需加载的块中,以便在需要时加载运行时代码。

在大多数情况下,核心运行代码时允许内联入口模块,而不是用 __webpack_require__ 来调用它。如果代码包中没有其他模块,则根本不需要使用__webpack_require__。这与模块合并很好地结合在一起,即多个模块被合并成一个模块。在最好的情况下,根本不需要运行时代码。

迁移:如果你在插件中注入运行时代码到 Webpack 运行时,可以考虑使用 RuntimeModules 来代替。

10.3 序列化

我们添加了一个序列化机制,以允许在 webpack 中对复杂对象进行序列化。它有一个可选的语义,所以那些应该被序列化的类需要被明确地标记出来(并且实现它们的序列化)。大多数模块、所有的依赖关系和一些错误都已经这样做了。

迁移:当使用自定义模块或依赖关系时,建议将它们实现成可序列化的,以便从持久化缓存中获益。

10.4 用于缓存的插件

增加了一个带有插件接口的 Cache 类。该类可用于写入和读取缓存。根据配置的不同,不同的插件可以为缓存添加功能。MemoryCachePlugin 增加了内存缓存功能。FileCachePlugin 增加了持久性(文件系统)缓存。FileCachePlugin 使用序列化机制将缓存项目持久化到磁盘上或从磁盘上恢复。

10.5 Tapable 插件升级

Webpack 3 插件的 compat 层已经被移除,并且它在 Webpack 4 中已经被取消了,一些较少使用的 tapable API 被删除或废弃。

10.6 Main/Chunk/ModuleTemplate 废弃

打包模板已经重构。MainTemplate/ChunkTemplate/ModuleTemplate 被废弃,现在 JavascriptModulesPlugin 负责 JS 模板。

在那次重构之前,JS 输出由 Main/ChunkTemplate 处理,而另一个输出(即 WASM、CSS)则由插件处理。重构后这一点被改变了,所有的输出都由他们的插件处理。

依然可以侵入部分模板。钩子现在在 JavascriptModulesPlugin 中,而不是 Main/ChunkTemplate 中。(是的,插件也可以有钩子,我称之为附加钩子。)有一个兼容层,所以 Main/Chunk/ModuleTemplate 仍然存在,但只是将 tap 调用委托给新的钩子位置。

10.7 入口文件的新增配置

在 Webpack 5 中,入口文件除了字符串、字符串数组,也可以使用描述符进行配置了,如下所示。

module.exports = {
  entry: {
    catalog: {
      import: './catalog.js',
    },
  },
};

此外,我们也可以定义输出的文件名,之前都是通过 output.filename 进行定义的,如下所示。

module.exports = {
  entry: {
    about: { import: './about.js', filename: 'pages/[name][ext]' },
  },
};

另外,入口文件的配置,新增了文件依赖定义、生成类库的格式类型(commonjs 或 amd),也可以设置运行时的名字,以及代码块加载的方式,更多细节可以参考完整的发布记录。

10.8 排序与ID

Webpack 曾经在编译阶段以特定的方式对模块和代码块进行排序,以递增的方式分配 ID。现在不再是这样了。顺序将不再用于 ID 的生成,取而代之的是,ID 的生成完全由插件进行控制,并且优化模块和代码块顺序的钩子已经被移除。

10.9 从数组到集合(Set)

  • Compilation.modules 现在是一个集合
  • Compilation.chunks 现在是一个集合
  • Chunk.files 现在是一个集合

10.10 文件系统与信息变更

在Webpack 5 中,一个是需要使用 Compilation.fileSystemInfo 替代 file/contextTimestamps,获取文件的时间戳信息,另一个是新增Compiler.modifiedFiles 以便更容易引用更改后的文件。
另外,还新增了一个类似于 compiler.inputFileSystemcompiler.outputFileSystem 的新 API compiler.intermediateFileSystem,用于所有不被认为是输入或输出的 fs 操作,如写入 records,缓存或输出 profiling。

10.11 模块热替换

HMR 运行时已被重构为运行时模块。HotUpdateChunkTemplate 已被合并入 ChunkTemplate 中。ChunkTemplates 和 plugins 也应处理 HotUpdateChunk 了。

HMR 运行时的 Javascript 部分已从核心 HMR 运行时钟分离了出来。其他模块类型现在也可以使用它们自己的方式处理 HMR。在未来,这将使得 HMR 处理诸如 mini-css-extract-plugin 或 WASM 模块。

迁移:此为新功能,无需迁移。
import.meta.webpackHot 公开了与 module.hot 相同的 API。当然可以在 ESM 模块(.mjs,package.json 中的 type: "module")中使用,这些模块不能访问 module。

10.12 工作队列

Webpack 曾经通过函数调用函数的形式来进行模块处理,还有一个 semaphore 选项限制并行性。Compilation.semaphore 已被移除,现在可以使用异步队列处理,每个步骤都有独立的队列:

  • Compilation.factorizeQueue:为一组 dependencies 调用模块工厂。
  • Compilation.addModuleQueue:将模块添加到编译队列中(可以使用缓存恢复模块)
  • Compilation.buildQueue:必要时构建模块(可将模块存储到缓存中)
  • Compilation.rebuildQueue:如需手动触发,则会重新构建模块
  • Compilation.processDependenciesQueue:处理模块的 dependencies。

这些队列会有一些 hook 来监听并拦截工作的进程。未来,多个编译器会同时工作,可以通过拦截这些队列来进行编译工作的编排。

10.13 模块和 chunk 图

Webpack 曾经在依赖关系中存储了已解析的模块,并在 chunk 中存储引入的模块。但现已发生变化。所有关于模块在模块图中如何连接的信息,现在都存储在 ModulGraph 的 class 中。所有关于模块与 chunk 如何连接的信息现在都已存储在 ChunkGraph 的 class 中。依赖于 chunk 图的信息也存储在相关的 class 中。

以下列举一些模块的信息已被移动的例子:

  • Module connections -> ModuleGraph
  • Module issuer -> ModuleGraph
  • Module optimization bailout -> ModuleGraph (TODO: check if it should ChunkGraph instead)

当从缓存中恢复模块时,Webpack 会将模块从图中断开。现在已无需这么做。一个模块不存储图形的任何信息,技术上可以在多个图形中使用。这会使得缓存变得更加容易。这部分变化中大多数都有一个适配层,当使用时,它会打印一个弃用警告。

10.14 模块 Source Types

现在,模块必须通过 Module.getSourceTypes() 来定义它们支持的源码类型。根据这一点,不同的插件会用这些类型调用 source()。对于源类型为 Javascript 的 JavascriptModulesPlugin 会将源代码嵌入到 bundle 中。源类型 Webassembly 的 WebAssemblyModulesPlugin 会 emit 一个 wasm 文件。同时,也支持自定义源类型,例如,mini-css-extract-plugin 会使用源类型为 stylesheet 将源码嵌入到 css 文件中。

模块类型与源类型间没有关系。即使模块类型为 Json,也可以使用源类型为 Javascript 和模块类型为 webassembly/experimental 的 Javascript 和 Webassembly。

10.15 全新的观察者

Webpack 所使用的观察者已重构。它之前使用的是 chokidar 和原生依赖 fsevents(仅在 OSX 上)。现在它在只基于原生的 Node.js 中的 fs,这意味着在 webpack 中已经没有原生依赖了。

它还能在监听时捕捉更多关于文件系统的信息。目前,它还可以捕获 mtimes 和监视事件时间,以及丢失文件的信息。为此,WatchFileSystem API 做了一点小改动。在修改的同时,我们还将 Arrays 转换为 Sets,Objects 转换为 Maps。

10.16 SizeOnlySource after emit

Webpack 现在使用 SizeOnlySource 替换 Compilation.assets 中的 Sources,以减少内存占用情况。

10.17 ExportsInfo

重构了模块导出信息的存储方式。ModuleGraph 现在为每个 Module 提供了一个 ExportsInfo,它用于存储每个 export 的信息。如果模块仅以副作用的方式使用,它还存储了关于未知 export 的信息,并且每个 export都会存储以下信息:

  • 是否使用 export? 是否使用并不确定。
  • 是否提供 export? 是否提供并不确定。
  • 能否重命名 export 名? 是否重命名,也不确定
  • 如果 export 已重新命名,则为新名称。
  • 嵌套的 ExportsInfo,如果 export 是一个含有附加信息的对象,那么它本身就是一个对象。

10.18 代码生成阶段

编译的代码生成功能作为单独的编译阶段。它不再隐藏在 Module.source() 和 Module.getRuntimeRequirements() 中运行了。这应该会使得流程更加简洁。它还运行报告该阶段的进度。并使得代码生成在剖析时更加清晰可见。

迁移时,Module.source()Module.getRuntimeRequirements() 已弃用,然后使用 Module.codeGeneration() 代替。

10.19 依赖关系参考

Webpack 曾经有一个单一的方法和类型来表示依赖关系的引用(Compilation.getDependencyReference 会返回一个 DependencyReference)该类型用于引入关于该引用的所有信息,如 被引用的模块,已经引入了哪些 export,如果是弱引用,还需要订阅一些相关信息。把所有这些信息构建在一起,拿到参考的成本就很高,而且很频繁(每次有人需要一个信息)。

在 Webpack5 中,这部分代码库被重构了,方法进行了拆分:

  • 引用的模块可以从 ModuleGraphConnection 中读取
  • 引入的导出名,可以通过 Dependency.getReferencedExports() 获取
  • Dependency 的 class 上会有一个 weak 的 flag
  • 排序只与 HarmonyImportDependencies 相关,可以通过 sourceOrder 属性获取

10.20 Presentational Dependencies

这是 NormalModules 的一种新 Dependencies 类型:Presentational Dependencies。这些 dependencies 只在代码生成阶段使用,但在模块图构建过程中未使用。所以它们永远不能引用模块或影响导出/导入。这些依赖关系的处理成本较低,Webpack 会尽可能地使用它们。

10.21 弃用 loaders

null-loader已被弃用,可以使用下面的写法进行替换。

module.exports = {
  resolve: {
    alias: {
      xyz$: false,
    },
  },
};
// 或者使用绝对路径
module.exports = {
  resolve: {
    alias: {
      [path.resolve(__dirname, '....')]: false,
    },
  },
};

总的来说,Webpack 5 的大部分工作都围绕优化进行展开,去除了 Webpck 4 中有废弃的内容,新增了长期缓存,优化了内核等内容。

参考文档:中文文档:webpack.docschina.org

查看原文

赞 10 收藏 4 评论 0

hackftz 回答了问题 · 10月13日

typescript里的外部枚举怎么理解

这个declare是个坑

关注 4 回答 2

hackftz 发布了文章 · 9月25日

深入理解TypeScript——第一章:上手篇

怎么定义TypeScript呢? TypeScript是一个工具 是一个编译器

1、编译代码

TypeScript,通过它的能力,默认使用tsc命令,可以根据.ts为后缀名的文件生成一个新的js文件

2、类型注解

TypeScript里的类型注解是一种轻量级的为函数或变量添加约束的方式。TypeScript提供了静态的代码分析,它可以分析代码结构和提供的类型注解。

function doSth(who: string): string {
  return "I want to say hello to " + who;
}

let who = 'her';

const doWhat = doSth(who);

console.log('doWhat:', doWhat)
// doWhat: I want say hello to her

这里插个题外话,如果部分语法产生error的话,要考虑tsconfig.json这样的配置文件(比如lib部分)是否支持了你需要的Javascript规范,如果不支持的话,建议使用polyfill

3、接口

允许我们在实现接口时候只要保证包含了接口要求的结构就可以

interface Girl {
  hair: string;
  face: string;
}

function describe(girl: Girl): string {
  let words = 'she has '
  let decs = Object.entries(girl)
  let len = decs.length

  for (let i = 0; i < len; i++) {
    const [where, like] = decs[i];
    words+=(like + ' ' + where)
    words+=(i === len - 1 ? '' : ' and ')
  }
  return words
}

const sentence = describe({
  hair: 'long',
  face: 'beautiful'
})

console.log('sentence:', sentence);
// sentence: she has long hair and beautiful face

4、类

支持基于类的面向对象编程
在构造函数的参数上使用public等同于创建了同名的成员变量

class She {
  praise: string;
  constructor(public hair: string, public face: string) {
    // this.praise =  hair + ' hair' + " and " + face + ' face';
  }
}

interface Girl {
  hair: string;
  face: string;
}

function describe(girl: Girl): string {
  let words = 'she has '
  let decs = Object.entries(girl)
  let len = decs.length

  for (let i = 0; i < len; i++) {
    const [where, like] = decs[i];
    words+=(like + ' ' + where)
    words+=(i === len - 1 ? '' : ' and ')
  }
  return words
}

const she = new She('long', 'beautiful')

const sentence = describe(she)

console.log('sentence', sentence);

上面这段代码通过ts编译,成为了下面这段代码

var She = /** @class */ (function () {
    function She(hair, face) {
        this.hair = hair;
        this.face = face;
        // this.praise =  hair + ' hair' + " and " + face + ' face';
    }
    return She;
}());
function describe(girl) {
    var words = 'she has ';
    var decs = Object.entries(girl);
    var len = decs.length;
    for (var i = 0; i < len; i++) {
        var _a = decs[i], where = _a[0], like = _a[1];
        words += (like + ' ' + where);
        words += (i === len - 1 ? '' : ' and ');
    }
    return words;
}
var she = new She('long', 'beautiful');
var sentence = describe(she);
console.log('sentence', sentence);

看起来,只是多了一些特殊的注释,以及修改了一些局部变量名,所以ts主要的功能其实是为了规范书写,校验传入参数是否正确,从而实现更高质量的代码!

查看原文

赞 1 收藏 0 评论 0

hackftz 赞了回答 · 3月21日

解决vue 哪个生命周期进行数据请求

我都是直接在beforeCreate钩子中发起请求,因为从beforeCreate钩子到created钩子的过程,Vue是同步执行的。也就是等ajax发起异步请求的时候,vue的数据绑定已经完成了。至于状态管理,我推荐楼主使用Vuet,主要是因为vuex在大部分的时候,都会非常的繁琐,而Vuet可以很轻松的实现组件通信、模块管理、状态重置等

关注 14 回答 11

hackftz 赞了文章 · 2019-12-31

Vue 原生右键菜单组件

vue-contextmenujs

Vue 原生实现右键菜单组件, 零依赖

FireShot Capture 003 - Vue CLI App - localhost.png

项目地址

https://github.com/GitHub-Laziji/menujs

在线演示

快速安装

npm 安装

npm install vue-contextmenujs

CDN

<script data-original="https://unpkg.com/vue-contextmenujs/dist/contextmenu.umd.js">

使用

测试中使用的是element-ui图标
import Contextmenu from "vue-contextmenujs"
Vue.use(Contextmenu);
<template>
  <div id="app" style="width:100vw;height:100vh" @contextmenu.prevent="onContextmenu"></div>
</template>

<script>
export default {
  methods: {
    onContextmenu(event) {
      this.$contextmenu({
        items: [
          {
            label: "返回(B)",
            onClick: () => {
              this.message = "返回(B)";
              console.log("返回(B)");
            }
          },
          { label: "前进(F)", disabled: true },
          { label: "重新加载(R)", divided: true, icon: "el-icon-refresh" },
          { label: "另存为(A)..." },
          { label: "打印(P)...", icon: "el-icon-printer" },
          { label: "投射(C)...", divided: true },
          {
            label: "使用网页翻译(T)",
            divided: true,
            minWidth: 0,
            children: [{ label: "翻译成简体中文" }, { label: "翻译成繁体中文" }]
          },
          {
            label: "截取网页(R)",
            minWidth: 0,
            children: [
              {
                label: "截取可视化区域",
                onClick: () => {
                  this.message = "截取可视化区域";
                  console.log("截取可视化区域");
                }
              },
              { label: "截取全屏" }
            ]
          },
          { label: "查看网页源代码(V)", icon: "el-icon-view" },
          { label: "检查(N)" }
        ],
        event,
        //x: event.clientX,
        //y: event.clientY,
        customClass: "class-a",
        zIndex: 3,
        minWidth: 230
      });
      return false;
    }
  }
};
</script>

参数说明

Menu

属性描述类型可选值默认值
items菜单结构信息MenuItem[]
event鼠标事件信息Event
x菜单显示X坐标, 存在event则失效number0
y菜单显示Y坐标, 存在event则失效number0
zIndex菜单样式z-indexnumber2
customClass自定义菜单classstring
minWidth主菜单最小宽度number150

MenuItem

属性描述类型可选值默认值
label菜单项名称string
icon菜单项图标, 生成<i class="icon"></i>元素string
disabled是否禁用菜单项booleanfalse
divided是否显示分割线booleanfalse
customClass自定义子菜单classstring
minWidth子菜单最小宽度number150
onClick菜单项点击事件Function()
children子菜单结构信息MenuItem[]
欢迎关注我的博客公众号
2018_11_16_0048241709.png
查看原文

赞 16 收藏 10 评论 1

hackftz 赞了文章 · 2019-12-31

让"any-rule"告诉你🔥2019年"开发者"都在用的正则有哪些?

如若初见

any-rule是一个vscode插件, 开发者可以方便的查询常用正则.
vscode中搜索"any-rule"

🍭非vscode用户可以访问web版本: https://any86.github.io/any-r...

any-rule

快速成长

1.png

实时star✨

image

6月28日开的项目, 截至本文star已经增长到1625, 这要非常感谢🔥平台曝光和各位优质开发者的认可😊, 请收下微臣的膝盖orz.

经过半年的维护,整理正则已经达到61条, 共计解决了45issue, 🍔根据开发者反馈新增了14条正则. 下面我就列出这些新增的正则, 算是为19年的any-rule做一个总结.

🍔 根据开发者反馈, 新增加的正则

火车车次

/^[GCDZTSPKXLY1-9]\d{1,4}$/

手机机身码(IMEI)

/^\d{15,17}$/

必须带端口号的网址(或ip)

/^(((ht|f)tps?):\/\/)?[\w\-]+(\.[\w\-]+)+:\d{0,5}\/?/

网址(支持端口和"?+参数"和"#+参数)

/^(((ht|f)tps?):\/\/)?[\w\-]+(\.[\w\-]+)+([\w\-.,@?^=%&:\/~+#]*[\w\-@?^=%&\/~+#])?$/

统一社会信用代码

/^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/

迅雷链接

/^thunderx?:\/\/[a-zA-Z\d]+=$/

ed2k链接(宽松匹配)

/^ed2k:\/\/\|file\|.+\|\/$/

磁力链接(宽松匹配)

/^magnet:\?xt=urn:btih:[0-9a-fA-F]{40,}.*$/

子网掩码

/^(?:\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(?:\.(?:\d{1,2}|1\d\d|2[0-4]\d|25[0-5])){3}$/

linux"文件夹"路径

/^\/(\w+\/?)+$/

linux"文件"路径

/^\/(\w+\/)+\w+\.\w+$/

window下"文件夹"路径

/^[a-zA-Z]:\\(?:\w+\\?)*$/

window下"文件"路径

/^[a-zA-Z]:\\(?:\w+\\)*\w+\.\w+$/

A股代码

/^(s[hz]|S[HZ])(000[\d]{3}|002[\d]{3}|300[\d]{3}|600[\d]{3}|60[\d]{4})$/

大于等于0, 小于等于150, 支持小数位出现5, 如145.5, 用于判断考卷分数

/^150$|^(?:\d|[1-9]\d|1[0-4]\d)(?:.5)?$/

🚀 typescript系列课程

如果你对ts感兴趣了, 欢迎看看我的ts基础教程.

第一课, 体验typescript

第二课, 基础类型和入门高级类型

第三课, 泛型

第四课, 解读高级类型

第五课, 命名空间(namespace)是什么

特别篇, 在vue3🔥源码中学会typescript🦕 - "is"

第六课, 什么是声明文件(declare)? 🦕 - 全局声明篇

🧨 最后

还是要感谢平台, 祝愿新的一年里平台越来越好🔥. 2020年我会通过实例教大家一些基础的正则, 方便大家对自己的业务做需要的更改, 希望大家喜欢.

微信群

WechatIMG32646.jpeg

微博

刚玩微博, 咱们可以互相关注, 嘿嘿
weibo.png

查看原文

赞 7 收藏 2 评论 2

hackftz 评论了文章 · 2018-05-28

async/await 执行顺序详解

随着async/await正式纳入ES7标准,越来越多的人开始研究据说是异步编程终级解决方案的 async/await。但是很多人对这个方法中内部怎么执行的还不是很了解,本文是我看了一遍技术博客理解 JavaScript 的 async/await(如果对async/await不熟悉可以先看下这篇文章)后拓展了一下,我理了一下await之后js的执行顺序,希望可以给别人解疑答惑,先简单介绍一下async/await。

  1. async/await 是一种编写异步代码的新方法。之前异步代码的方案是回调和 promise。
  2. async/await 是建立在 promise 的基础上。
  3. async/await 像 promise 一样,也是非阻塞的。
  4. async/await 让异步代码看起来、表现起来更像同步代码。这正是其威力所在。

async怎么处理返回值

async function testAsync() {
    return "hello async";
}
let result = testAsync();
console.log(result)

输出结果:

Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: "hello async"}

从结果中可以看到async函数返回的是一个promise对象,如果在函数中 return 一个直接量,async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象。

如果asyn函数没有返回值

async function testAsync1() {
    console.log("hello async");
}
let result1 = testAsync1();
console.log(result1);

结果

hello async
Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: undefined}

结果返回Promise.resolve(undefined)。

await做了什么处理

从字面意思上看await就是等待,await 等待的是一个表达式,这个表达式的返回值可以是一个promise对象也可以是其他值。

很多人以为await会一直等待之后的表达式执行完之后才会继续执行后面的代码,实际上await是一个让出线程的标志。await后面的函数会先执行一遍,然后就会跳出整个async函数来执行后面js栈(后面会详述)的代码。等本轮事件循环执行完了之后又会跳回到async函数中等待await
后面表达式的返回值,如果返回值为非promise则继续执行async函数后面的代码,否则将返回的promise放入promise队列(Promise的Job Queue)

async/await 执行顺序

先看一个例子

function testSometing() {
    console.log("执行testSometing");
    return "testSometing";
}

async function testAsync() {
    console.log("执行testAsync");
    return Promise.resolve("hello async");
}

async function test() {
    console.log("test start...");
    const v1 = await testSometing();//关键点1
    console.log(v1);
    const v2 = await testAsync();
    console.log(v2);
    console.log(v1, v2);
}

test();

var promise = new Promise((resolve)=> { console.log("promise start.."); resolve("promise");});//关键点2
promise.then((val)=> console.log(val));

console.log("test end...")

输出结果:

test start...
执行testSometing
promise start..
test end...
testSometing
执行testAsync
promise
hello async
testSometing hello async

当test函数执行到

const v1 = await testSometing();

的时候,会先执行testSometing这个函数打印出“执行testSometing”的字符串,然后因为await会让出线程就会区执行后面的

var promise = new Promise((resolve)=> { console.log("promise
start.."); resolve("promise");});//关键点2

然后打印出“promise start..”接下来会把返回的这promise放入promise队列(Promise的Job Queue),继续执行打印“test end...”,等本轮事件循环执行结束后,又会跳回到async函数中(test函数),等待之前await 后面表达式的返回值,因为testSometing 不是async函数,所以返回的是一个字符串“testSometing”,test函数继续执行,执行到

const v2 = await testAsync();

和之前一样又会跳出test函数,执行后续代码,此时事件循环就到了promise的队列,执行promise.then((val)=> console.log(val));then后面的语句,之后和前面一样又跳回到test函数继续执行。

这个就是在async/await 函数之后js的执行顺序,我们再看一个列子把testSometing函数前面加上async

async function testSometing() {
    console.log("执行testSometing");
    return "testSometing";
}

async function testAsync() {
    console.log("执行testAsync");
    return Promise.resolve("hello async");
}

async function test() {
    console.log("test start...");
    const v1 = await testSometing();
    console.log(v1);
    const v2 = await testAsync();
    console.log(v2);
    console.log(v1, v2);
}

test();

var promise = new Promise((resolve)=> { console.log("promise start.."); resolve("promise");});//3
promise.then((val)=> console.log(val));

console.log("test end...")

输出结果:

test start...
执行testSometing
promise start..
test end...
promise
testSometing
执行testAsync
hello async
testSometing hello async

和上一个例子比较发现promise.then((val)=> console.log(val));先与console.log(v1);执行了,原因是因为现在testSometing函数加了async,返回的是一个Promise对象要要等它resolve,所以将当前Promise推入队列,所以会继续跳出test函数执行后续代码。之后就开始执行promise的任务队列了,所以先执行了promise.then((val)=> console.log(val));因为这个Promise对象先推入队列;

写在最后

写到这里大家应该已经清楚了使用async/await进行异步操作时js的执行顺序,在研究过程中还发现了js的任务队列执行顺序的问题,就下次再述。如果大家对有什么意见或建议可以指出。本篇是我第一次发布文章,希望大家不吝赐教。

查看原文

hackftz 赞了文章 · 2018-03-03

手摸手,带你用vue撸后台 系列一(基础篇)

完整项目地址:vue-element-admin
系类文章二:手摸手,带你用vue撸后台 系列二(登录权限篇)
系类文章三:手摸手,带你用vue撸后台 系列三(实战篇)
系类文章四:手摸手,带你用vue撸后台 系列四(vueAdmin 一个极简的后台基础模板)
系类文章:手摸手,带你优雅的使用 icon
系类文章:手摸手,带你封装一个vue component

前言

说好的教程终于来了,第一篇文章主要来说一说在开始写实际业务代码之前的一些准备工作吧,但这里不会教你 webpack 的基础配置,热更新原理是什么,webpack速度优化等等,有需求的请自行 google,相关文章已经很多了。

目录结构

├── build                      // 构建相关  
├── config                     // 配置相关
├── src                        // 源代码
│   ├── api                    // 所有请求
│   ├── assets                 // 主题 字体等静态资源
│   ├── components             // 全局公用组件
│   ├── directive              // 全局指令
│   ├── filtres                // 全局 filter
│   ├── icons                  // 项目所有 svg icons
│   ├── lang                   // 国际化 language
│   ├── mock                   // 项目mock 模拟数据
│   ├── router                 // 路由
│   ├── store                  // 全局 store管理
│   ├── styles                 // 全局样式
│   ├── utils                  // 全局公用方法
│   ├── vendor                 // 公用vendor
│   ├── views                   // view
│   ├── App.vue                // 入口页面
│   ├── main.js                // 入口 加载组件 初始化等
│   └── permission.js          // 权限管理
├── static                     // 第三方不打包资源
│   └── Tinymce                // 富文本
├── .babelrc                   // babel-loader 配置
├── eslintrc.js                // eslint 配置项
├── .gitignore                 // git 忽略项
├── favicon.ico                // favicon图标
├── index.html                 // html模板
└── package.json               // package.json

这里来简单讲一下src文件

api 和 views

简单截取一下公司后台项目,现在后台大概有四五十个 api 模块

如图可见模块有很多,而且随着业务的迭代,模块还会会越来越多。
所以这里建议根据业务模块来划分 views,并且 将views 和 api 两个模块一一对应,从而方便维护。如下图:

如 article 模块下放的都是文章相关的 api,这样不管项目怎么累加,api和views的维护还是清晰的,当然也有一些全区公用的api模块,如七牛upload,remoteSearch等等,这些单独放置就行。

components

这里的 components 放置的都是全局公用的一些组件,如上传组件,富文本等等。一些页面级的组件建议还是放在各自views文件下,方便管理。如图:

store

这里我个人建议不要为了用 vuex 而用 vuex。就拿我司的后台项目来说,它虽然比较庞大,几十个业务模块,几十种权限,但业务之间的耦合度是很低的,文章模块和评论模块几乎是俩个独立的东西,所以根本没有必要使用 vuex 来存储data,每个页面里存放自己的 data 就行。当然有些数据还是需要用 vuex 来统一管理的,如登录token,用户信息,或者是一些全局个人偏好设置等,还是用vuex管理更加的方便,具体当然还是要结合自己的业务场景的。总之还是那句话,不要为了用vuex而用vuex!


webpack

这里是用 vue-cliwebpack-template 为基础模板构建的,如果你对这个有什么疑惑请自行google,相关的配置绍其它的文章已经介详细了,这里就不再展开了。简单说一些需要注意到地方。

jquery (本项目已移除)

管理后台不同于前台项目,会经常用到一些第三方插件,但有些插件是不得不依赖 jquery 的,如市面很多富文本基都是依赖 jquery 的,所以干脆就直接引入到项目中省事(gzip之后只有34kb,而且常年from cache,不要考虑那些吹毛求疵的大小问题,这几kb和提高的开发效率根本不能比)。但是如果第三方库的代码中出现$.xxx或jQuery.xxx或window.jQuery或window.$则会直接报错。要达到类似的效果,则需要使用 webpack 内置的 ProvidePlugin 插件,配置很简单,只需要

new webpack.ProvidePlugin({
  $: 'jquery' ,
  'jQuery': 'jquery'
})

这样当 webpack 碰到 require 的第三方库中出现全局的$、jQeury和window.jQuery 时,就会使用 node_module 下 jquery 包 export 出来的东西了。

alias

当项目逐渐变大之后,文件与文件直接的引用关系会很复杂,这时候就需要使用alias 了。
有的人喜欢alias 指向src目录下,再使用相对路径找文件

resolve: {
  alias: {
    '~': resolve(__dirname, 'src')
  }
}

//使用
import stickTop from '~/components/stickTop'

或者也可以

alias: {
  'src': path.resolve(__dirname, '../src'),
  'components': path.resolve(__dirname, '../src/components'),
  'api': path.resolve(__dirname, '../src/api'),
  'utils': path.resolve(__dirname, '../src/utils'),
  'store': path.resolve(__dirname, '../src/store'),
  'router': path.resolve(__dirname, '../src/router')
}

//使用
import stickTop from 'components/stickTop'
import getArticle from 'api/article'

没有好与坏对与错,纯看个人喜好和团队规范。


ESLint

不管是多人合作还是个人项目,代码规范是很重要的。这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。这所谓工欲善其事,必先利其器,个人推荐 eslint+vscode 来写 vue,绝对有种飞一般的感觉。效果如图:
eslintGif.gif
每次保存,vscode就能标红不符合eslint规则的地方,同时还会做一些简单的自我修正。安装步骤如下:

首先安装eslint插件
eslint1.png

安装并配置完成 ESLint 后,我们继续回到 VSCode 进行扩展设置,依次点击 文件 > 首选项 > 设置 打开 VSCode 配置文件,添加如下配置


    "files.autoSave":"off",
    "eslint.validate": [
       "javascript",
       "javascriptreact",
       "html",
       { "language": "vue", "autoFix": true }
     ],
     "eslint.options": {
        "plugins": ["html"]
     }

这样每次保存的时候就可以根据根目录下.eslintrc.js你配置的eslint规则来检查和做一些简单的fix。这里提供了一份我平时的eslint规则地址,都简单写上了注释。每个人和团队都有自己的代码规范,统一就好了,去打造一份属于自己的eslint 规则上传到npm吧,如饿了么团队的 config,vue的 config

vscode 插件和配置推荐


封装 axios

我们经常遇到一些线上 的bug,但测试环境很难模拟。其实可以通过简单的配置就可以在本地调试线上环境。
这里结合业务封装了axios ,线上代码

import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(config => {
  // Do something before request is sent
  if (store.getters.token) {
    config.headers['X-Token'] = getToken() // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
  }
  return config
}, error => {
  // Do something with request error
  console.log(error) // for debug
  Promise.reject(error)
})

// respone拦截器
service.interceptors.response.use(
  response => response,
  /**
  * 下面的注释为通过response自定义code来标示请求状态,当code返回如下情况为权限有问题,登出并返回到登录页
  * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
  */
  //  const res = response.data;
  //     if (res.code !== 20000) {
  //       Message({
  //         message: res.message,
  //         type: 'error',
  //         duration: 5 * 1000
  //       });
  //       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
  //       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
  //         MessageBox.confirm('你已被登出,可以取消继续留在该页面,或者重新登录', '确定登出', {
  //           confirmButtonText: '重新登录',
  //           cancelButtonText: '取消',
  //           type: 'warning'
  //         }).then(() => {
  //           store.dispatch('FedLogOut').then(() => {
  //             location.reload();// 为了重新实例化vue-router对象 避免bug
  //           });
  //         })
  //       }
  //       return Promise.reject('error');
  //     } else {
  //       return response.data;
  //     }
  error => {
    console.log('err' + error)// for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  })

export default service
import request from '@/utils/request'

//使用
export function getInfo(params) {
  return request({
    url: '/user/info',
    method: 'get',
    params
  });
}

比如后台项目,每一个请求都是要带 token 来验证权限的,这样封装以下的话我们就不用每个请求都手动来塞 token,或者来做一些统一的异常处理,一劳永逸。
而且因为我们的 api 是根据 env 环境变量动态切换的,如果以后线上出现了bug,我们只需配置一下 @/config/dev.env.js 再重启一下服务,就能在本地模拟线上的环境了。

module.exports = {
    NODE_ENV: '"development"',
    BASE_API: '"https://api-dev"', //修改为'"https://api-prod"'就行了
    APP_ORIGIN: '"https://wallstreetcn.com"' //为公司打个广告 pc站为vue+ssr
}

妈妈再也不用担心我调试线上bug了。
当然这里只是简单举了个例子,axios还可以执行多个并发请求,拦截器什么的,大家自行去研究吧。


多环境

vue-cli 默认只提供了devprod两种环境。但其实正真的开发流程可能还会多一个sit或者stage环境,就是所谓的测试环境和预发布环境。所以我们就要简单的修改一下代码。其实很简单就是设置不同的环境变量

"build:prod": "NODE_ENV=production node build/build.js",
"build:sit": "NODE_ENV=sit node build/build.js",

之后在代码里自行判断,想干就干啥

var env = process.env.NODE_ENV === 'production' ? config.build.prodEnv : config.build.sitEnv

新版的 vue-cli 也内置了 webpack-bundle-analyzer 一个模块分析的东西,相当的好用。使用方法也很简单,和之前一样封装一个 npm script 就可以。

//package.json
 "build:sit-preview": "cross-env NODE_ENV=production env_config=sit npm_config_preview=true  npm_config_report=true node build/build.js"

//之后通过process.env.npm_config_report来判断是否来启用webpack-bundle-analyzer

var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())

效果图
analyzer.png
webpack-bundle-analyzer这个插件还是很有用的,对后期的代码优化什么的,最重要的是它够装逼~


前后端交互

每个公司都有自己一套的开发流程,没有绝对的好与坏。这里我来讲讲我司的前后端交互流程。

跨域问题

首先前后端交互不可避免的就会遇到跨域问题,我司现在全是用 cors来解决的,如果你司后端嫌麻烦不肯配置的话,dev环境也可以通过
webpack-dev-serverproxy来解决,开发环境用nginx反代理一下就好了,具体配置这里就不展开了。

前后端的交互问题

其实大家也知道,平时的开发中交流成本占据了我们很大一部分时间,但前后端如果有一个好的协作方式的话能解决很多时间。我司开发流程都是前后端和产品一起开会讨论项目,之后后端根据需求,首先定义数据格式和api,然后 mock api 生成好文档,我们前端才是对接接口的。这里推荐一个文档生成器 swagger
swagger是一个REST APIs文档生成工具,可以在许多不同的平台上从代码注释中自动生成,开源,支持大部分语言,社区好,总之就是一个强大,如下图的api 文档(swagger自动生成,ui忽略)


api 地址,需要传是没参数,需要的传参类型,返回的数据格式什么都一清二楚了。

前端自行mock

如果后端不肯来帮你 mock 数据的话,前端自己来 mock 也是很简单的。你可以使用mock server 或者使用 mockjs + rap 也是很方便的。
不久前出的 easy-mock也相当的不错,还能结合 swagger。
我们大前端终于不用再看后端的脸色了~

iconfont

element-ui 默认的icon不是很多,这里要安利一波阿里的iconfont简直是神器,不管是公司项目还是个人项目都在使用。它提供了png,ai,svg三种格式,同时使用也支持unicode,font-class,symbol三种方式。由于是管理后台对兼容性要求不高,楼主平时都喜欢用symbol,晒一波我司后台的图标(都是楼主自己发挥的)。
iconfont.png
详细具体的使用可以见文章 手摸手,带你优雅的使用 icon


router-view

different router the same component vue。真实的业务场景中,这种情况很多。比如router-view.png
我创建和编辑的页面使用的是同一个component,默认情况下当这两个页面切换时并不会触发vue的created或者mounted钩子,官方说你可以通过watch $route的变化来做处理,但其实说真的还是蛮麻烦的。后来发现其实可以简单的在 router-view上加上一个唯一的key,来保证路由切换时都会重新渲染触发钩子了。这样简单的多了。

<router-view :key="key"></router-view>

computed: {
    key() {
        return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
    }
 }

优化

有些人会觉得现在构建是不是有点慢,我司现在技术栈是容器服务,后台项目会把dist文件夹里的东西都会打包成一个docker镜像,基本步骤为

npm install
npm run build:prod
加打包镜像,一共是耗时如下

Paste_Image.png

还是属于能接受时间的范围。
主站PC站基于nodejs、Vue实现服务端渲染,所以不仅需要依赖nodejs,而且需要利用pm2进行nodejs生命周期的管理。为了加速线上镜像构建的速度,我们利用taobao源 https://registry.npm.taobao.org 进行加速, 并且将一些常见的npm依赖打入了基础镜像,避免每次都需要重新下载。
这里注意下 建议不要使用cnpm install或者update 它的包都是一个link,反正会有各种诡异的bug,这里建议这样使用

npm install --registry=https://registry.npm.taobao.org

如果你觉得慢还是有可优化的空间如使用webpack dll 或者把那些第三方vendor单独打包 external出去,或者我司现在用的是http2 可以使用AggressiveSplittingPlugin等等,这里有需求的可以自行优化。


占坑

常规占坑,这里是手摸手,带你用vue撸后台系列。
完整项目地址:vue-element-admin
系类文章二:手摸手,带你用vue撸后台 系列二(登录权限篇)
系类文章三:手摸手,带你用vue撸后台 系列三(实战篇)
系类文章四:手摸手,带你用vue撸后台 系列四(vueAdmin 一个极简的后台基础模板)
系类文章:手摸手,带你优雅的使用 icon
系类文章:手摸手,带你封装一个vue component
楼主个人免费圈子

查看原文

赞 485 收藏 970 评论 55

hackftz 收藏了文章 · 2018-02-25

Vue2.0 新手完全填坑攻略—从环境搭建到发布——Jinkey 原创

本文作者 Jinkey(微信公众号 jinkey-love,官网 https://jinkey.ai
文章允许非篡改署名转载,删除或修改本段版权信息转载的,视为侵犯知识产权,我们保留追求您法律责任的权利,特此声明!
感谢 showonneyubang 技术指导
Demo 地址:
http://demo.jinkey.io/vue2
源码:
https://github.com/Jinkeycode/vue2-example
原文链接
https://jinkey.ai/post/tech/vue2.0-xin-shou-wan-quan-tian-keng-gong-lue-cong-huan-jing-da-jian-dao-fa-bu

什么是 Vue

Vue 是一个前端框架,特点是
数据绑定

比如你改变一个输入框 Input 标签的值,会自动同步更新到页面上其他绑定该输入框的组件的值


数据绑定

组件化

页面上小到一个按钮都可以是一个单独的文件.vue,这些小组件直接可以像乐高积木一样通过互相引用而组装起来

组件化

Vue2.0 推荐开发环境


开发环境解释

Homebrew 1.0.6(Mac)、Node.js 6.7.0、npm 3.10.3、webpack 1.13.2、vue-cli 2.4.0、Atom 1.10.2

安装环境

打开终端运行以下命令

安装brew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安装 nodejs

brew install nodejs

用 npm install npm@3.10.3 更新 npm 版本报错:

(node:42) fs: re-evaluating native module sources is not supported.

解决办法:
在官网下载6.70的安装包再安装一次(刚刚相当于帮你配置好环境变量,现在再安装一次升级到最新的 npm)

  • 好像以前官网的安装包不会自动配置环境变量的,由于我电脑上之前安装过 nodejs 所以环境变量已经配置好了,不知道现在的安装包会不会自动配置环境变量。

Windows 下直接下载安装包即可

获取nodejs模块安装目录访问权限

sudo chmod -R 777 /usr/local/lib/node_modules/

安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装webpack

cnpm install webpack -g

安装vue脚手架

npm install vue-cli -g

在硬盘上找一个文件夹放工程用的,在终端中进入该目录

Mac

cd 目录路径

根据模板创建项目

vue init webpack-simple 工程名字<工程名字不能用中文>

或者创建 vue1.0 的项目

vue init webpack-simple#1.0 工程名字<工程名字不能用中文>

会有一些初始化的设置,如下输入:
Target directory exists. Continue? (Y/n) 直接回车默认(然后会下载 vue2.0模板,这里可能需要连代理)
Project name (vue-test) 直接回车默认
Project description (A Vue.js project) 直接回车默认
Author 写你自己的名字

cd 命令进入创建的工程目录

工程目录如图所示:

安装项目依赖

一定要从官方仓库安装,npm 服务器在国外所以这一步安装速度会很慢。

npm install

不要从国内镜像cnpm安装(会导致后面缺了很多依赖库)

cnpm install

安装 vue 路由模块vue-router和网络请求模块vue-resource

cnpm install vue-router vue-resource --save

启动项目

npm run dev

填坑(以下坑可能由于 vue2.0 导致其他相关编译打包工具没更新导致的)

【重点】后来发现这些坑是由于 npm 不是最新的版本3.10.2, 用 npm 3.9.5就会出现以下坑
解决办法: 请运行以下命令
npm update -g

报错

Error: Cannot find module 'opn'
Error: Cannot find module 'webpack-dev-middleware'
Error: Cannot find module 'express'
Error: Cannot find module 'compression'
Error: Cannot find module 'sockjs'
Error: Cannot find module 'spdy'
Error: Cannot find module 'http-proxy-middleware'
Error: Cannot find module 'serve-index'

如果你用的是老版本的 vue-cli 还可能报其他错误,需要更新一下 vue-cli

npm update vue-cli

然后可以查看一下当前全局 vue-cli 的版本

npm view vue-cli

安装一下这个依赖到工程开发环境

cnpm install opn --save-dev
cnpm install webpack-dev-middleware --save-dev
cnpm install express --save-dev
cnpm install compression --save-dev
cnpm install sockjs --save-dev
cnpm install spdy --save-dev
cnpm install http-proxy-middleware --save-dev
cnpm install serve-index --save-dev
cnpm install connect-history-api-fallback --save-dev

再启动项目,报错

ERROR in ./src/main.js

Module build failed: Error: Cannot find module 'babel-runtime/helpers/typeof'

at Function.Module._resolveFilename (module.js:440:15)
at Function.Module._load (module.js:388:25)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/Volumes/MacStorage/Coding/Web/vue-test/node_modules/.6.17.0@babel-core/lib/transformation/file/index.js:6:16)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)

@ multi main
ERROR in ./~/.2.1.0-beta.8@webpack-dev-server/client/socket.js
Module not found: Error: Can't resolve 'sockjs-client' in '/Volumes/MacStorage/Coding/Web/vue-test/node_modules/.2.1.0-beta.8@webpack-dev-server/client'
@ ./~/.2.1.0-beta.8@webpack-dev-server/client/socket.js 1:13-37
@ ./~/.2.1.0-beta.8@webpack-dev-server/client?http://localhost:8080
@ multi main

安装一下 babel-runtime

cnpm install babel-helpers --save-dev

启动项目,再次报错

Module build failed: Error: Cannot find module 'babel-helpers'
Module build failed: Error: Cannot find module 'babel-traverse'
Module build failed: Error: Cannot find module 'json5'
Module build failed: Error: Cannot find module 'babel-generator'
Module build failed: Error: Cannot find module 'detect-indent'
Module build failed: Error: Cannot find module 'jsesc'

找不到依赖那就再安装一下

cnpm install babel-helpers --save-dev
cnpm install babel-traverse --save-dev
cnpm install json5 --save-dev
...不写了,请把全部把旧的环境全部清除,更新到最新版本

解决办法概述

遇到

Module build failed: Error: Cannot find module '模块名'

那就安装

cnpm install 模块名 --save-dev(关于环境的,表现为npm run dev 启动不了)
cnpm install 模块名 --save(关于项目的,比如main.js,表现为npm run dev 成功之后控制台报错)

比如escape-string-regexp、strip-ansi、has-ansi、is-finite、emojis-list

终于可以启动项目了

输入完命令会自动启动浏览器,如果默认打开 IE 不行

npm run dev

自动启动浏览器就会看到这 帅帅的界面了。

开始 Vue 之旅

打开 IDE

推荐 Atom 打开项目,需要安装 Vue 语法高亮的插件

使用官网文档学习基础

我们来看官网的一个例子,(中文文档请自行上网搜索)

打开 工程目录下的 App.vue
template 写 html,script写 js,style写样式

为了方便叙述,我们把官网例子写在同一个组件内
这里有两个坑:
第一。一个组件下只能有一个并列的 div,可以这么写,所以复制官网示例的时候只要复制 div 里面的内容就好。

但是不能这样写:

第二。数据要写在 return 里面而不是像文档那样子写

错误的写法:

这样子可以自己啃完官网文档组件之前的部分了。

来玩玩组件

前面讲得基本上都是各种常用组件的数据绑定,下面还得说说的是 Vue 的组件的使用。
在工程目录/src下创建component文件夹,并在component文件夹下创建一个 firstcomponent.vue并写仿照 App.vue 的格式和前面学到的知识写一个组件。

<template>
  <div id="firstcomponent">
    <h1>I am a title.</h1>
    <a> written by {{ author }} </a>
  </div>
</template>

<script type="text/javascript">
export default {
  data () {
    return {
      author: "微信公众号 jinkey-love"
    }
  }
}
</script>

<style>
</style>

duang... 不能按官网文档那样子叫我做就做,我得先试试再告诉你,我做完效果是这样子的,希望观众做完也是这样子。(迷之微笑 )

然后在 App.vue 使用组件 ( 因为在 index.html 里面定义了<div id="app"></div>所以就以这个组件作为主入口,方便 )
第一步,引入。在<script></script>标签内的第一行写

import firstcomponent from './component/firstcomponent.vue'

第二步,注册。在<script></script>标签内的 data 代码块后面加上 components: { firstcomponent }。记得中间加英文逗号!!!

export default {
  data () {
    return {
      msg: 'Hello Vue!'
    }
  },
  components: { firstcomponent }
}

第三步,使用
<template></template>内加上<firstcomponent></firstcomponent>

<template>
  <div id="app">
    <img data-original="./assets/logo.png">
    <h1>{{ msg }}</h1>
    <firstcomponent></firstcomponent>
  </div>
</template>

完成后的代码:

这时候看看浏览器上的 http://localhost:8080/ 页面(之前打开过就会自动刷新),如果你没看到效果是因为你没有对 App.vuefirstcomponent.vue 进行保存操作,保存后页面会自动刷新。

使用路由搭建单页应用

之前已经通过命令安装了vue-router

cnpm install vue-router --save

webpack.config.js加入别名

resolve: {
    alias: {vue: 'vue/dist/vue.js'}
  }

为什么要加 alias 配置项?其作用可以在文档中有相应的描述:

修改完之后的webpack.config.js是这样子的:

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  resolveLoader: {
    root: path.join(__dirname, 'node_modules'),
  },
  module: {
    loaders: [
      {
        test: /\\.vue$/,
        loader: 'vue'
      },
      {
        test: /\\.js$/,
        loader: 'babel',
        exclude: /node_modules/
      },
      {
        test: /\\.(png|jpg|gif|svg)$/,
        loader: 'file',
        query: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {vue: 'vue/dist/vue.js'}
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ])
}

再按之前的方法写一个组件 secondcomponent.vue

<template>
  <div id="secondcomponent">
    <h1>I am another page</h1>
    <a> written by {{ author }} </a>
    <p> 感谢 <a href="https://github.com/showonne">showonne</a>大神的技术指导</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      author: "微信公众号 jinkey-love",
      articles: [],
    }
  }
  }
}
</script>

<style>
</style>

这时候修改 main.js,引入并注册 vue-router

import VueRouter from "vue-router";
Vue.use(VueRouter);

并且配置路由规则和 app 启动配置项加上 router,旧版的 router.map 方法在 vue-router 2.0 已经不能用了。修改后的main.js如下:

import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router";
import VueResource from 'vue-resource'

//开启debug模式
Vue.config.debug = true;

Vue.use(VueRouter);
Vue.use(VueResource);

// 定义组件, 也可以像教程之前教的方法从别的文件引入
const First = { template: '<div><h2>我是第 1 个子页面</h2></div>' }
import secondcomponent from './component/secondcomponent.vue'

// 创建一个路由器实例
// 并且配置路由规则
const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    {
      path: '/first',
      component: First
    },
    {
      path: '/second',
      component: secondcomponent
    }
  ]
})

// 现在我们可以启动应用了!
// 路由器会创建一个 App 实例,并且挂载到选择符 #app 匹配的元素上。
const app = new Vue({
  router: router,
  render: h => h(App)
}).$mount('#app')

这样子改完再打开浏览器看看。

点击那两个链接试试,会发现<router-view class="view"></router-view>的内容已经展示出来,同时注意浏览器地址已经变更

另外,也可以把 App.vue 的内容写在 main.js 也是可以的不过不建议这么做

如果你使用 vue1.0和0.7版本的 vue-router,请参照下面这个教程, 他整个系列都不错的,当然仅限于 vue1.0 :

http://guowenfh.github.io/201...

给页面加点动态数据

这时候的页面都是静态的(数据在写程序的时候已经固定了不能修改),而每个应用基本上都会请求外部数据以动态改变页面内容。对应有一个库叫 vue-resource 帮我们解决这个问题。
使用命令行安装

cnpm install vue-resource --save

在 main.js 引入并注册 vue-resource:

import VueResource from 'vue-resource'
Vue.use(VueResource);

我们在 secondcomponent.vue 上来动态加载数据
添加一个列表:

<ul>
      <li v-for="article in articles">
        {{article.title}}
      </li>
    </ul>

在 data 里面加入数组 articles 并赋值为[]
然后在 data 后面加入加入钩子函数 mounted(详细请参照官方文档关于 vue 生命周期的解析),data 和 mount 中间记得记得加逗号

mounted: function() {
    this.$http.jsonp('https://api.douban.com/v2/movie/top250?count=10', {}, {
        headers: {

        },
        emulateJSON: true
    }).then(function(response) {
      // 这里是处理正确的回调

        this.articles = response.data.subjects
        // this.articles = response.data["subjects"] 也可以

    }, function(response) {
        // 这里是处理错误的回调
        console.log(response)
    });
  }

这里使用的是豆瓣的公开 GET 接口,如果接口是跨域的 POST 请求,则需要在服务器端配置:

Access-Control-Allow-Origin: *

这时候运行看看。等一会接口返回数据,咦,数据加载出来了,棒棒哒 !

更多 vue-router 的使用方法可以看

vue-router 0.7
http://m.doc00.com/doc/1001004eg
vue-router 2.0
http://router.vuejs.org/zh-cn...

来拯救如此难看的界面

组件、双向绑定、路由、数据请求等基本特性都能用了,写到这里一个单页应用基本上成型了。但是,这几面也太 TM 难看了吧。自己写 UI 框架太费劲?那就上网找一个吧。
本来想给大家介绍 Vux 的,因为他用的是微信的 WeUI 设计规范,对于开发微信小程序或者微信内的网页非常和谐,但由于写这篇文章的时候 Vux 还不支持 vue2.0,只能用别的框架了。
命令行安装 ElementUI (此处某公司的人应该发红包了...)

cnpm install element-ui@next -S

然后在 main.js 引入并注册

import Element from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(Element)

保存,这时候程序报错

Uncaught Error: Module parse failed: /Users/**/Desktop/vue2/node_modules/.1.0.0-rc.5@element-ui/lib/theme-default/index.css Unexpected character '@' (1:0)

You may need an appropriate loader to handle this file type.

官网文档又有坑了,安装教程也不跟我们说这一步,当我们都是高手了...
报错是由于我们引入了index.css这个 CSS 文件,但是 webpack 打包的时候无法识别并转换成 js,所以就需要配置才能读取 css 和字体文件,运行命令安装下面三个东西(如果之前安装过就不需要了)

cnpm install style-loader --save-dev
cnpm install css-loader --save-dev
cnpm install file-loader --save-dev

webpack.config.js 中的 loaders 数组加入以下配置,记得该加逗号的地方加逗号!

{
    test: /\\.css$/,
    loader: "style!css"
},
{
    test: /\\.(eot|woff|woff2|ttf)([\\?]?.*)$/,
    loader: "file"
}

修改完的 webpack.config.js 如下

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  resolveLoader: {
    root: path.join(__dirname, 'node_modules'),
  },
  module: {
    loaders: [
      {
        test: /\\.vue$/,
        loader: 'vue'
      },
      {
        test: /\\.js$/,
        loader: 'babel',
        exclude: /node_modules/
      },
      {
          test: /\\.css$/,
          loader: "style!css"
      },
      {
        test: /\\.(eot|woff|woff2|ttf)([\\?]?.*)$/,
        loader: "file"
      },
      {
        test: /\\.(png|jpg|gif|svg)$/,
        loader: 'file',
        query: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {vue: 'vue/dist/vue.js'}
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ])
}

给豆瓣的电影列表套个衣服(样式) :

<el-card class="box-card">
      <div slot="header" class="clearfix">
        <h1 style="line-height: 36px; color: #20A0FF">豆瓣电影排行榜</h2>
      </div>
      <div v-for="article in articles" class="text item">
        {{article.title}}
      </div>
</el-card>

打开浏览器,输入网址:

http://localhost:8080/second


列表比之前漂亮多了,你还可以参照 ElementUI 的文档使用更多组件样式

http://element.eleme.io/#/com...

编译

npm run build

又报错了...orz

ERROR in build.js from UglifyJs

SyntaxError: Unexpected token punc «(», expected punc «:» [build.js:32001,6]
把node_modules/.bin/cross-env里的

require('../dist')(process.argv.slice(2));

后来发现直接运行 webpack 命令就可以打包了

webpack --color --progress

接着把 index.html 和整个 dist 目录丢到服务器就可以了。

填坑不易,打赏一下呗
0?tp=webp&wxfrom=5&wx_lazy=1

查看原文

hackftz 赞了文章 · 2018-02-25

Vue2.0 新手完全填坑攻略—从环境搭建到发布——Jinkey 原创

本文作者 Jinkey(微信公众号 jinkey-love,官网 https://jinkey.ai
文章允许非篡改署名转载,删除或修改本段版权信息转载的,视为侵犯知识产权,我们保留追求您法律责任的权利,特此声明!
感谢 showonneyubang 技术指导
Demo 地址:
http://demo.jinkey.io/vue2
源码:
https://github.com/Jinkeycode/vue2-example
原文链接
https://jinkey.ai/post/tech/vue2.0-xin-shou-wan-quan-tian-keng-gong-lue-cong-huan-jing-da-jian-dao-fa-bu

什么是 Vue

Vue 是一个前端框架,特点是
数据绑定

比如你改变一个输入框 Input 标签的值,会自动同步更新到页面上其他绑定该输入框的组件的值


数据绑定

组件化

页面上小到一个按钮都可以是一个单独的文件.vue,这些小组件直接可以像乐高积木一样通过互相引用而组装起来

组件化

Vue2.0 推荐开发环境


开发环境解释

Homebrew 1.0.6(Mac)、Node.js 6.7.0、npm 3.10.3、webpack 1.13.2、vue-cli 2.4.0、Atom 1.10.2

安装环境

打开终端运行以下命令

安装brew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安装 nodejs

brew install nodejs

用 npm install npm@3.10.3 更新 npm 版本报错:

(node:42) fs: re-evaluating native module sources is not supported.

解决办法:
在官网下载6.70的安装包再安装一次(刚刚相当于帮你配置好环境变量,现在再安装一次升级到最新的 npm)

  • 好像以前官网的安装包不会自动配置环境变量的,由于我电脑上之前安装过 nodejs 所以环境变量已经配置好了,不知道现在的安装包会不会自动配置环境变量。

Windows 下直接下载安装包即可

获取nodejs模块安装目录访问权限

sudo chmod -R 777 /usr/local/lib/node_modules/

安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装webpack

cnpm install webpack -g

安装vue脚手架

npm install vue-cli -g

在硬盘上找一个文件夹放工程用的,在终端中进入该目录

Mac

cd 目录路径

根据模板创建项目

vue init webpack-simple 工程名字<工程名字不能用中文>

或者创建 vue1.0 的项目

vue init webpack-simple#1.0 工程名字<工程名字不能用中文>

会有一些初始化的设置,如下输入:
Target directory exists. Continue? (Y/n) 直接回车默认(然后会下载 vue2.0模板,这里可能需要连代理)
Project name (vue-test) 直接回车默认
Project description (A Vue.js project) 直接回车默认
Author 写你自己的名字

cd 命令进入创建的工程目录

工程目录如图所示:

安装项目依赖

一定要从官方仓库安装,npm 服务器在国外所以这一步安装速度会很慢。

npm install

不要从国内镜像cnpm安装(会导致后面缺了很多依赖库)

cnpm install

安装 vue 路由模块vue-router和网络请求模块vue-resource

cnpm install vue-router vue-resource --save

启动项目

npm run dev

填坑(以下坑可能由于 vue2.0 导致其他相关编译打包工具没更新导致的)

【重点】后来发现这些坑是由于 npm 不是最新的版本3.10.2, 用 npm 3.9.5就会出现以下坑
解决办法: 请运行以下命令
npm update -g

报错

Error: Cannot find module 'opn'
Error: Cannot find module 'webpack-dev-middleware'
Error: Cannot find module 'express'
Error: Cannot find module 'compression'
Error: Cannot find module 'sockjs'
Error: Cannot find module 'spdy'
Error: Cannot find module 'http-proxy-middleware'
Error: Cannot find module 'serve-index'

如果你用的是老版本的 vue-cli 还可能报其他错误,需要更新一下 vue-cli

npm update vue-cli

然后可以查看一下当前全局 vue-cli 的版本

npm view vue-cli

安装一下这个依赖到工程开发环境

cnpm install opn --save-dev
cnpm install webpack-dev-middleware --save-dev
cnpm install express --save-dev
cnpm install compression --save-dev
cnpm install sockjs --save-dev
cnpm install spdy --save-dev
cnpm install http-proxy-middleware --save-dev
cnpm install serve-index --save-dev
cnpm install connect-history-api-fallback --save-dev

再启动项目,报错

ERROR in ./src/main.js

Module build failed: Error: Cannot find module 'babel-runtime/helpers/typeof'

at Function.Module._resolveFilename (module.js:440:15)
at Function.Module._load (module.js:388:25)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/Volumes/MacStorage/Coding/Web/vue-test/node_modules/.6.17.0@babel-core/lib/transformation/file/index.js:6:16)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)

@ multi main
ERROR in ./~/.2.1.0-beta.8@webpack-dev-server/client/socket.js
Module not found: Error: Can't resolve 'sockjs-client' in '/Volumes/MacStorage/Coding/Web/vue-test/node_modules/.2.1.0-beta.8@webpack-dev-server/client'
@ ./~/.2.1.0-beta.8@webpack-dev-server/client/socket.js 1:13-37
@ ./~/.2.1.0-beta.8@webpack-dev-server/client?http://localhost:8080
@ multi main

安装一下 babel-runtime

cnpm install babel-helpers --save-dev

启动项目,再次报错

Module build failed: Error: Cannot find module 'babel-helpers'
Module build failed: Error: Cannot find module 'babel-traverse'
Module build failed: Error: Cannot find module 'json5'
Module build failed: Error: Cannot find module 'babel-generator'
Module build failed: Error: Cannot find module 'detect-indent'
Module build failed: Error: Cannot find module 'jsesc'

找不到依赖那就再安装一下

cnpm install babel-helpers --save-dev
cnpm install babel-traverse --save-dev
cnpm install json5 --save-dev
...不写了,请把全部把旧的环境全部清除,更新到最新版本

解决办法概述

遇到

Module build failed: Error: Cannot find module '模块名'

那就安装

cnpm install 模块名 --save-dev(关于环境的,表现为npm run dev 启动不了)
cnpm install 模块名 --save(关于项目的,比如main.js,表现为npm run dev 成功之后控制台报错)

比如escape-string-regexp、strip-ansi、has-ansi、is-finite、emojis-list

终于可以启动项目了

输入完命令会自动启动浏览器,如果默认打开 IE 不行

npm run dev

自动启动浏览器就会看到这 帅帅的界面了。

开始 Vue 之旅

打开 IDE

推荐 Atom 打开项目,需要安装 Vue 语法高亮的插件

使用官网文档学习基础

我们来看官网的一个例子,(中文文档请自行上网搜索)

打开 工程目录下的 App.vue
template 写 html,script写 js,style写样式

为了方便叙述,我们把官网例子写在同一个组件内
这里有两个坑:
第一。一个组件下只能有一个并列的 div,可以这么写,所以复制官网示例的时候只要复制 div 里面的内容就好。

但是不能这样写:

第二。数据要写在 return 里面而不是像文档那样子写

错误的写法:

这样子可以自己啃完官网文档组件之前的部分了。

来玩玩组件

前面讲得基本上都是各种常用组件的数据绑定,下面还得说说的是 Vue 的组件的使用。
在工程目录/src下创建component文件夹,并在component文件夹下创建一个 firstcomponent.vue并写仿照 App.vue 的格式和前面学到的知识写一个组件。

<template>
  <div id="firstcomponent">
    <h1>I am a title.</h1>
    <a> written by {{ author }} </a>
  </div>
</template>

<script type="text/javascript">
export default {
  data () {
    return {
      author: "微信公众号 jinkey-love"
    }
  }
}
</script>

<style>
</style>

duang... 不能按官网文档那样子叫我做就做,我得先试试再告诉你,我做完效果是这样子的,希望观众做完也是这样子。(迷之微笑 )

然后在 App.vue 使用组件 ( 因为在 index.html 里面定义了<div id="app"></div>所以就以这个组件作为主入口,方便 )
第一步,引入。在<script></script>标签内的第一行写

import firstcomponent from './component/firstcomponent.vue'

第二步,注册。在<script></script>标签内的 data 代码块后面加上 components: { firstcomponent }。记得中间加英文逗号!!!

export default {
  data () {
    return {
      msg: 'Hello Vue!'
    }
  },
  components: { firstcomponent }
}

第三步,使用
<template></template>内加上<firstcomponent></firstcomponent>

<template>
  <div id="app">
    <img data-original="./assets/logo.png">
    <h1>{{ msg }}</h1>
    <firstcomponent></firstcomponent>
  </div>
</template>

完成后的代码:

这时候看看浏览器上的 http://localhost:8080/ 页面(之前打开过就会自动刷新),如果你没看到效果是因为你没有对 App.vuefirstcomponent.vue 进行保存操作,保存后页面会自动刷新。

使用路由搭建单页应用

之前已经通过命令安装了vue-router

cnpm install vue-router --save

webpack.config.js加入别名

resolve: {
    alias: {vue: 'vue/dist/vue.js'}
  }

为什么要加 alias 配置项?其作用可以在文档中有相应的描述:

修改完之后的webpack.config.js是这样子的:

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  resolveLoader: {
    root: path.join(__dirname, 'node_modules'),
  },
  module: {
    loaders: [
      {
        test: /\\.vue$/,
        loader: 'vue'
      },
      {
        test: /\\.js$/,
        loader: 'babel',
        exclude: /node_modules/
      },
      {
        test: /\\.(png|jpg|gif|svg)$/,
        loader: 'file',
        query: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {vue: 'vue/dist/vue.js'}
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ])
}

再按之前的方法写一个组件 secondcomponent.vue

<template>
  <div id="secondcomponent">
    <h1>I am another page</h1>
    <a> written by {{ author }} </a>
    <p> 感谢 <a href="https://github.com/showonne">showonne</a>大神的技术指导</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      author: "微信公众号 jinkey-love",
      articles: [],
    }
  }
  }
}
</script>

<style>
</style>

这时候修改 main.js,引入并注册 vue-router

import VueRouter from "vue-router";
Vue.use(VueRouter);

并且配置路由规则和 app 启动配置项加上 router,旧版的 router.map 方法在 vue-router 2.0 已经不能用了。修改后的main.js如下:

import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router";
import VueResource from 'vue-resource'

//开启debug模式
Vue.config.debug = true;

Vue.use(VueRouter);
Vue.use(VueResource);

// 定义组件, 也可以像教程之前教的方法从别的文件引入
const First = { template: '<div><h2>我是第 1 个子页面</h2></div>' }
import secondcomponent from './component/secondcomponent.vue'

// 创建一个路由器实例
// 并且配置路由规则
const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    {
      path: '/first',
      component: First
    },
    {
      path: '/second',
      component: secondcomponent
    }
  ]
})

// 现在我们可以启动应用了!
// 路由器会创建一个 App 实例,并且挂载到选择符 #app 匹配的元素上。
const app = new Vue({
  router: router,
  render: h => h(App)
}).$mount('#app')

这样子改完再打开浏览器看看。

点击那两个链接试试,会发现<router-view class="view"></router-view>的内容已经展示出来,同时注意浏览器地址已经变更

另外,也可以把 App.vue 的内容写在 main.js 也是可以的不过不建议这么做

如果你使用 vue1.0和0.7版本的 vue-router,请参照下面这个教程, 他整个系列都不错的,当然仅限于 vue1.0 :

http://guowenfh.github.io/201...

给页面加点动态数据

这时候的页面都是静态的(数据在写程序的时候已经固定了不能修改),而每个应用基本上都会请求外部数据以动态改变页面内容。对应有一个库叫 vue-resource 帮我们解决这个问题。
使用命令行安装

cnpm install vue-resource --save

在 main.js 引入并注册 vue-resource:

import VueResource from 'vue-resource'
Vue.use(VueResource);

我们在 secondcomponent.vue 上来动态加载数据
添加一个列表:

<ul>
      <li v-for="article in articles">
        {{article.title}}
      </li>
    </ul>

在 data 里面加入数组 articles 并赋值为[]
然后在 data 后面加入加入钩子函数 mounted(详细请参照官方文档关于 vue 生命周期的解析),data 和 mount 中间记得记得加逗号

mounted: function() {
    this.$http.jsonp('https://api.douban.com/v2/movie/top250?count=10', {}, {
        headers: {

        },
        emulateJSON: true
    }).then(function(response) {
      // 这里是处理正确的回调

        this.articles = response.data.subjects
        // this.articles = response.data["subjects"] 也可以

    }, function(response) {
        // 这里是处理错误的回调
        console.log(response)
    });
  }

这里使用的是豆瓣的公开 GET 接口,如果接口是跨域的 POST 请求,则需要在服务器端配置:

Access-Control-Allow-Origin: *

这时候运行看看。等一会接口返回数据,咦,数据加载出来了,棒棒哒 !

更多 vue-router 的使用方法可以看

vue-router 0.7
http://m.doc00.com/doc/1001004eg
vue-router 2.0
http://router.vuejs.org/zh-cn...

来拯救如此难看的界面

组件、双向绑定、路由、数据请求等基本特性都能用了,写到这里一个单页应用基本上成型了。但是,这几面也太 TM 难看了吧。自己写 UI 框架太费劲?那就上网找一个吧。
本来想给大家介绍 Vux 的,因为他用的是微信的 WeUI 设计规范,对于开发微信小程序或者微信内的网页非常和谐,但由于写这篇文章的时候 Vux 还不支持 vue2.0,只能用别的框架了。
命令行安装 ElementUI (此处某公司的人应该发红包了...)

cnpm install element-ui@next -S

然后在 main.js 引入并注册

import Element from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(Element)

保存,这时候程序报错

Uncaught Error: Module parse failed: /Users/**/Desktop/vue2/node_modules/.1.0.0-rc.5@element-ui/lib/theme-default/index.css Unexpected character '@' (1:0)

You may need an appropriate loader to handle this file type.

官网文档又有坑了,安装教程也不跟我们说这一步,当我们都是高手了...
报错是由于我们引入了index.css这个 CSS 文件,但是 webpack 打包的时候无法识别并转换成 js,所以就需要配置才能读取 css 和字体文件,运行命令安装下面三个东西(如果之前安装过就不需要了)

cnpm install style-loader --save-dev
cnpm install css-loader --save-dev
cnpm install file-loader --save-dev

webpack.config.js 中的 loaders 数组加入以下配置,记得该加逗号的地方加逗号!

{
    test: /\\.css$/,
    loader: "style!css"
},
{
    test: /\\.(eot|woff|woff2|ttf)([\\?]?.*)$/,
    loader: "file"
}

修改完的 webpack.config.js 如下

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  resolveLoader: {
    root: path.join(__dirname, 'node_modules'),
  },
  module: {
    loaders: [
      {
        test: /\\.vue$/,
        loader: 'vue'
      },
      {
        test: /\\.js$/,
        loader: 'babel',
        exclude: /node_modules/
      },
      {
          test: /\\.css$/,
          loader: "style!css"
      },
      {
        test: /\\.(eot|woff|woff2|ttf)([\\?]?.*)$/,
        loader: "file"
      },
      {
        test: /\\.(png|jpg|gif|svg)$/,
        loader: 'file',
        query: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {vue: 'vue/dist/vue.js'}
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ])
}

给豆瓣的电影列表套个衣服(样式) :

<el-card class="box-card">
      <div slot="header" class="clearfix">
        <h1 style="line-height: 36px; color: #20A0FF">豆瓣电影排行榜</h2>
      </div>
      <div v-for="article in articles" class="text item">
        {{article.title}}
      </div>
</el-card>

打开浏览器,输入网址:

http://localhost:8080/second


列表比之前漂亮多了,你还可以参照 ElementUI 的文档使用更多组件样式

http://element.eleme.io/#/com...

编译

npm run build

又报错了...orz

ERROR in build.js from UglifyJs

SyntaxError: Unexpected token punc «(», expected punc «:» [build.js:32001,6]
把node_modules/.bin/cross-env里的

require('../dist')(process.argv.slice(2));

后来发现直接运行 webpack 命令就可以打包了

webpack --color --progress

接着把 index.html 和整个 dist 目录丢到服务器就可以了。

填坑不易,打赏一下呗
0?tp=webp&wxfrom=5&wx_lazy=1

查看原文

赞 38 收藏 262 评论 33

认证与成就

  • 获得 1 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2018-01-03
个人主页被 103 人浏览