大给力 StencilJS 网络组件
这个项目是根据来自 https://stenciljs.com/docs/getting-started (中文(简体) )
设置和构建
从 github 获取最新版本的代码库
git clone https://github.com/thebiggive/components.git
cd components
安装套件定义的 StencilJS 依赖性. json
设定 FONTAWESOME_NPM_AUTH_TOKEN 在您的环境中可以安装职业软件包,以及:
npm install
npm start
运行测试
npm test
发展
遵循 Stencil + 存储器公约
CI运行lint检查,但有一些工具可以帮助您遵循预期的代码样式,所以您没有 晚点再修.
在视觉工作室代码中,你可能会发现 此 ESLint 扩展名 财务报告和审定财务报表 这个最漂亮的一个 帮助.
我们使用两种工具来确保一致的代码风格和遵守斯通西尔推荐的做法.
胡斯基应该给你设置一个 承诺前的钩子 可以自动修复任何东西 并抱怨
关于其他的。 如果你看起来没有这个 之前已经安装过软件包
设置、 运行 npm install 再来一次.
依赖和构建产出
外部管理的任何内容都应该装入 npm , 并且不检查副本到这个编码库中 。 我们可以用斯通西尔 copy
任务和目标应用 构建策略 使事物到达正确的位置.
生成的建筑产出也应是 .gitignore(单位:千美元).
因为斯坦西尔的组件 部分 在修改后生成 readme 文档 @Prop{\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}或者类似的东西
必要时间 npm run build 在完成你的改变之前 文件是源控的,因为它们可以包括手动
内容。 CircleCI 也会运行 npm run build 如果需要进行任何未承诺的修改,则失败.
如果你做了一个新的,这是一个好主意 增加一行描述它的目的 在读取前 生成区域.
产出目标
Stencil能够从一个应用程序的源头 编译到众多的目标
主要目标是:
angularOutputTarget()- 用于 捐赠前端。 。 。 .dist-custom-elements- 医生不会说得很清楚 但根据我们目前的配置, 它们是Angular项目/目标成功构建的依赖。 需要告诉角力 他们住在里面dist/(因此载于dist/components) (中文(简体) ).dist-hydrate-script用于SSD - 用于 捐赠前端 最初由ECS服务. 斯坦西尔 文档此文件。 。 。 .dist一般网页模块 - 用于 文字压力。 。 。 .- 故事书有自己的构建步骤,使用源代码的组件. 目前,这也用于 销售力量将组件嵌入 Iframes 是唯一可行的方法 我们得到了经验 以动态拉入组件.
docs-readme用于文档.
我们的目标只是局部实验:
www
角构件
以及核心计划 @biggive/components,CI自动发布一个最适合
角为 @biggive/components-angular前者可以装入Angular,但后者会
工作比较好 已记录在案。 。 。 .
我们的Angular工作空间和图书馆就是按照文件设置的,但我们的Stencil图书馆就住在这 repo's root,一个目录从docs的结构上起. 迄今为止,这似乎没有不利影响.
资产依赖关系
到目前为止,我们的战略是避免将文件资产分开,如果这是一个外出选项,但 以其他方式选择复制到更复杂的构建时间变化(例如基-64-内置图像). 这是为了迅速提出最简单的概念工作证据,我们可能很快会重新审视.
现在:
- FontAwesome使用纯SVG而不是字体. 这似乎很好,我怀疑是最好的选择 - 性能、组件互操作性、简单性和遵守许可证.
- Euclid 字体被复制为 Stencil
copy任务和可用数据assets/fonts。举例来说,Angular app的构建可以使用以下样式: 添加到一个angular.json"styles"键 :"node_modules/@biggive/components/dist/biggive/assets/fonts/EuclidTriangle/stylesheet.css" - 图像也被复制到 Stencil
copy任务,并使用固定引用 一种路径,例如:.getAssetPath('/assets/images/banner.png')见 立体资产文件 更多关于这个。 角质似乎 无法使用此选项setAssetPath()如果我们配置它"assets"将文件放入同一位置的密钥 文件夹作为应用程序自己的图像。 这就是我们采取的方法 此概念分支的证明。 。 。 . 如果我们发现管理图像资产 混乱在应用软件, 我们可以采取另一种方法 尝试将图像导入到组件样式并添加@rollup/plugin-image到斯坦西尔的建筑配置。 或者,如果只有几个,我们也可以调查 是否为assetsDirs编号@Component以有效的方式折叠需要的东西 见Angular等人.
对样本网络组件作任何必要的修改
网络组件配置为 / src/ 组件
/src/index.html文件可以作为测试区域,在静态的HTML页面中显示网页组件.
运行 StencilJS 构建命令以包装您的更改
npm run build
产出
dist 目录 - https://stenciljs.com/docs/分发
此目录包含分布文件
www 目录 - https://stenciljs.com/docs/www. 请检查date=中的日期值 (帮助)
该目录包含一个静态版本的网络组件,可用于测试和包含在简单的网络应用中. 由于CORS的限制,Index.html文件需要从网络服务器运行(不是作为本地文件).
故事书
我们跟着 本指南 改为 提供关键部件的样本使用:生活风格指南.
从 main 分支, CI 自动 npm-publishes 一个新的主要版本并更新 故事书预览。 。 。 .
现在,当地人 npm run storybook 将不会装入静态图像资产或字体。 我们把现实放在优先位置
在部署环境中进行这些工作,原因是:
- CI单独复制主建筑
assets输出到 S3 : 例如见 .deploy-staging-storybook内 CI 配置 - 故事书有习惯
preview-head.html。 。 。 .
向国家预防机制公布
版本和出版
CircleCI 现在将创建一个新版本, 构建并发布到 npm
打开 每个 承诺 main。生成版本编号后,每次发布都会
是新的“ major” 发行, 因此依赖的软件包必须使用版本 "*" 自动
可在 npm update。 。 。 .
手动更新
不需要手动更新,但如果自动程序 23年前使用的台阶是:
- 更新根
package.json是因为version字段. npm install用于更新package-lock.json来匹配.- 更新
angular/projects/components/package.json是因为version字段这样@biggive/components-angular火柴也一样. git tag v0.0.1(替换您的新版本)git push --tags
必要时您也可以手动发布 npm :
首先, 如果您从未连接过 npm , 请连接 : npm add_user。 。 。 .
然后说:
npm publish --access=public
国家防范机制包名和版本号可在root包.json文件中更新. 目前设置为 (@ biggive/ 组件, 0.0.1)
有关出版和分发的更多信息,请访问 https://stenciljs.com/docs/分发
在 Web app 中包含组件
在 HTML 标题中包含以下脚本标签
<script type='module' src='https://unpkg.com/@biggive/[email protected]/dist/biggive/biggive.esm.js'></script>
包含网络样本组件的标记
<demo-campaign-cards></demo-campaign-cards>
样式组件
第一个样式组件可供使用
- 大小网格
- 大型运动卡
这些可以添加到 HTML 页面中,代码如下:
<biggive-grid>
<biggive-campaign-card
banner="/assets/images/banner.png"
days-remaining={50}
target={50000}
organisation-name="Ardent Theatre Company"
campaign-type="Match Funded"
campaign-title="Strike! A play by Tracy Ryan"
categories="Arts/Culture/Heritage|Environment/Conservation|Health/Wellbeing"
beneficiaries="General Public/Humankind"
match-funds-remaining={17424}
total-funds-raised={15424}
call-to-action-url="#"
call-to-action-label="Donate"
/>
</biggive-grid>
菲尔克
部分组件需要变体或备用版本来用于即将到来的菲尔克站点. 详情见 philco.md (英语)