Polymer3项目升级搭建 #3

nh0007 · 2020-03-31T07:06:19Z

Polymer3项目搭建

背景

Chrome 80版本后，组件不再支持HTML Imports，而使用更符合发展趋势的ES modules，Polymer1和polymer2均使用的是HTML Imports，在新版浏览器打开会有很多问题，因此，需将原有项目升级至Polymer3,这里简要讲一下搭建过程。

初始搭建

Polymer拥有自己的脚手架，可以搭建属于自己的项目，首先我们需要全局安装polymer-cli,再来搭建项目，项目搭建可以参照这里，搭建类型分为元素项目和应用项目，元素项目一般是类似于UI库之类的会选择这种，而这里我们选择polymer-3-application，搭建应用项目，window使用脚手架会有比较多的问题，可以参照这里

添加热加载

热加载是提高前端开发效率的手段之一，因此我们首先为项目添加热加载功能，初始打算使用webpack的webpack-dev-server实现热加载，但是由于Polymer本身已经具备开发、编译、pwa支持甚至语法转换的一套逻辑，使用webpack需要我们全部重新整理一遍，因此在这个项目中我们暂时不添加webpack，而使用browser-sync，专为同步浏览器测试而生，配置也比较简单，首先安装依赖

npm install browser-sync --save-dev

其次修改package.json中的scripts语句：

"scripts": {
  "start": "npm run watch | polymer serve",
  "watch": "browser-sync start --files \"src/**/*.*, index-dev.html, *.js\"",
},

运行npm start后，我们还需要在首页html文件的body标签内尾部添加上以下语句：

<script id="__bs_script__">//<![CDATA[
    document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.js?v=2.26.7'><\/script>".replace("HOST", location.hostname));
//]]></script>

端口并不一定都是3000，大致是查看空闲端口，如果端口被使用，则往下顺延，诸如3001，3002...
现在，我们修改src下面的文件，index-dev文件，以及根目录下的js文件，都会触发浏览器刷新。
browser-sync的更多使用可以参见官网

添加eslint配置

添加eslint配置有利于约束项目代码，Polymer3本身搭建项目后的polymer.json中也有lint的配置，像这样：

"lint": {
  "rules": [
    "polymer-3"
  ]
}

但这个约束似乎不能自己添加扩展，而且也不能使用编辑器自动修改，于是我们还是使用了eslint,并使用了标准配置，添加依赖：

npm install --save-dev eslint babel-eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node

在根目录下添加.eslintrc.js，根据自己项目所需进行配置，以下是该项目的初始配置：

module.exports = {
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "standard"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "allowImportExportEverywhere": true // 动态导入
  },
  "rules": {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // allow async-await
    'generator-star-spacing': 'off',
    'indent': ['error', 2],
    'no-var': 'error',// 禁用var，用let和const代替
    'no-restricted-imports': 'off'
  }
};

同时，在package.json添加检测语句：

"scripts": {
  "lint": "eslint --ext .js src/"
}

结合编辑器设置，我们可以检测并自动修正一些语法风格问题；
更多设置可以参考这里

添加pwa设置

pwa(Progressive Web App),渐进式Web应用，可以在不稳定的网络环境下，也能瞬间加载并展现网站，拥有平滑且沉浸式体验，同时可以安装到桌面，pwa是2016年Google提出的概念，Polymer本身也是Google团队出的框架，因此框架内置支持的很好，节省了很多额外配置。
其实pwa的配置走了一些弯路，一开始Polymer3官方配置文档说使用的是sw-precache,但对应的仓库却说不推荐使用，推荐使用Workbox,依照Workbox官方文档进行配置，一开始本只想设置为生产模式先使用，开发模式下不开启pwa，但在配置过程中没有达到对应效果，后来在同事提醒协助下，又重新使用了官方文档介绍的sw-precache，因为Polymer官方内置给了支持，配置起来也简便，有官方背书，使用起来也较为放心，而且配置生成的项目暂时来看也满足实际应用，就没有再捣鼓Workbox。
修改polymer.json配置：

"builds": [
  {
    "name": "es5-bundled",
    "js": {
      "compile": "es5",
      "minify": true,
      "transformModulesToAmd": true
    },
    "css": {
      "minify": true
    },
    "html": {
      "minify": true
    },
    "bundle": true,
    "addServiceWorker": true
  }
]

主要是设置addServiceWorker属性为true,然后在入口html文件添加代码注册service-worker，如下：

<head>
  <script>
  // Feature detect for service worker capability in the browser
  if ('serviceWorker' in navigator) {
    // Delay registering until page load
    window.addEventListener('load', function() {
      navigator.serviceWorker.register('service-worker.js');
    });
  }
  </script>
</head>

在根目录下创建空的service-worker.js文件，该文件在build模式Polymer会根据配置填充内容。
这样，在build模式下，就可以看到Service worker已经在运行了。
更多的配置可以参见这里,以及这里
这里有一个pwa项目的原始搭建流程，可以看看。

添加路由

Polymer有一个路由组件,通常可以结合iron-pages搭配使用，首先安装依赖：

npm install @polymer/app-route @polymer/iron-pages --save

在项目中启用路由

import { html, PolymerElement } from '@polymer/polymer/polymer-element.js'
import '@polymer/app-route/app-location.js'
import '@polymer/app-route/app-route.js'
import '@polymer/iron-pages'

/**
 * @customElement
 * @polymer
 */
class OssPolymer3App extends PolymerElement {
  static get template () {
    return html`
      <style>
        :host {
          display: block;
        }
      <app-location route="{{route}}"></app-location>
      <app-route route="{{route}}" pattern="/:page" data="{{routeData}}" tail="{{subroute}}"></app-route>
      <ul>
        <li>
          <a href="/home">Home</a>
        </li>
        <li> 
          <a href="/about">About</a> 
        </li>
      </ul>
      <iron-pages selected="[[page]]" attr-for-selected="name" selected-attribute="visible" fallback-selection="404">
        <home-page name="home"></home-page>
        <about-page name="about"></about-page>
      </iron-pages>
    `
  }

  static get properties () {
    return {
      page: {
        type: String,
        reflectToAttribute: true,
        observer: '_pageChanged'
      }
    }
  }

  static get observers () {
    return ['_routerChanged(routeData.page)']
  }

  _routerChanged (page) {
    this.page = page || 'home'
  }

  _pageChanged (currentPage) {
    switch (currentPage) {
    case 'home':
      import('../pages/home-page.js').then()
      break
    case 'about':
      import('../pages/about-page.js').then()
      break
    default:
      import('../pages/home-page.js').then()
      break
    }
  }
}

window.customElements.define('oss-polymer3-app', OssPolymer3App)

上面可以实现路由懒加载，更多的使用有待以后在更丰富的使用场景中去挖掘，更多使用可以参照这里

添加数据管理

一开始，以为Polymer的数据管理也是类似于vuex，但实际使用却发现不是这样，Polymer数据管理使用到了@polymer/app-storage,主要是通过localStorage和indexeddb去存储数据，从而对存储的数据进行监听，更多的使用详见官网，由于目前只是简单的搭建，更多的使用还待后续在使用过程中进行探索。

Ending

关于Polymer3的搭建大致就是这样，后续在使用过程中会继续进行完善修改，若有错误之处，还望指出。
完结撒花~

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Polymer3项目升级搭建 #3

Polymer3项目升级搭建 #3

nh0007 commented Mar 31, 2020 •

edited

Loading

Polymer3项目升级搭建 #3

Polymer3项目升级搭建 #3

Comments

nh0007 commented Mar 31, 2020 • edited Loading

Polymer3项目搭建

背景

初始搭建

添加热加载

添加eslint配置

添加pwa设置

添加路由

添加数据管理

Ending

nh0007 commented Mar 31, 2020 •

edited

Loading