使用Polymer3.0预览版

蚂蚁金服ProtoTeam · 掘金 · 前端 · 2017-12-08 03:08

正文

Polymer3.0预览版已经可以试验了，今天这部分将帮助你们开始使用。但是请注意，我们使用了
“试验”这个词。这是一个非常早期的预览版本，肯定有很多的缺陷。

但是，艺高人胆大-所以让我们继续。

获取工具

在开始之前，你需要更新到最新版本的Polymer Cli。

1	npm install -g polymer-cli

你还需要安装Yarn包管理器来安装组件，如前一篇文章所述。
有关说明请参考 Yarn安装页面。

最后，您需要安装Chrome 61或更高版本或Safari 10.1才能运行预览代码。

使用Yarn安装依赖

Polymer的组件都发布到了npm中的@polymer命名空间下。使用Yarn来安装组件。

Polymer 3.0还没有初始化的模板，所以你需要从头开始创建你的项目。

开始一个新的Polymer 3.0 预览版项目：

1.初始化项目。创建一个新的目录，并且运行yarn init。

yarn init

回答创建项目的步骤提示（在大多数情况下，你可以接受所有提示的默认值）。

2.编辑生成的package.json文件，添加flat属性：

1234	{ "name":"my-app", "flat":true, ...

3.使用yarn add安装组件，这个命令等价于bower install –save。例如：

12	yarn add @polymer/polymer@nextyarn add @webcomponents/webcomponentsjs

任何你之前使用Bower从Polymer和PolymerElements组织安装的组件，现在都可以从@polymer命名空间安装。请确保包含@next版本以获取3.0预览包。你可以从@wecomponents/webcomponentsjs安装填缝剂（这里不需要@next，因为你是用的是填缝剂的发布版本）。

备选Yarn设置

如果你还有其它的npm依赖，例如server，dev tools或者编译器，使用平铺结构安装所有依赖可能会导致版本冲突。在这种情况下，你可以：

使用–flat来安装web components
将”flat”:true从package.json文件中移除，然后添加–flat参数来安装前端组件。
1

yarn add --flat @polymer/polymer@next
对于存在package.json文件的项目来说，这种方式不太具有破坏性。这种方式的有点是将所有的依赖关系保存在单个的node_modules文件夹中，但是，这也以为着每次添加组件的时候都需要记住–flat标志。