使用Polymer3.0预览版

701 阅读2分钟
原文链接: www.codebe.org

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。

1
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标志。

    • 使用单独的目录
      另一种方法是在package.json文件中使用”flat”:true,并为需要嵌套的依赖项的包添加一个包含自己packge.json文件的子目录(例如:tools)。

使用模块

如果你不熟悉ES6模块,那么你可以了解很多关于ES6模块的知识。而这篇文章只会涉及一些关键的知识点。

如果你正在寻找ES6模块的详细资料,你可能需要阅读Axel Rauschmayer博士的探索ES6这篇文章。

你也可以观看Sam Thorogood在Polymer Summit上关于ES6模块的讨论。
视频地址:youtu.be/fIP4pjAqCtQ…

安装依赖

你可以使用