在线测试 <<>> Github Code <<>> NPM

开发者

技术体系

  • 必须

    • ES6
    • jQuery
    • lodash
    • webpack

  • 其他

    • vuejs
    • Gitbook
    • nodejs

项目结构

  • /build 发布到 NPM - TextWrapPX 的输出目录
  • /dist 支持在线示例页面的打包文件，Github-Pages 源引的 JS 文件目录；同 index.html 一起工作
  • /docs 请参考 Gitbook - TextWrapPX
  • /examples 在线示例页面的源码目录，基于 vuejs 框架搭建
  • /scripts
    • core.js 暂未使用，考虑到将来移除对 jquery、lodash 的依赖，可能会自实现部分方法；
    • index.js 打包的入口文件，也是对 TextWrapPX 类的再一次封装，隐藏细节接口；
    • text-wrap-px.js TextWrapPX 类文件，包含该TextWrapPX 的主要逻辑；
    • text-wrap-px.options.js 所有的 options 定义，也包括每个配置项的验证；
    • utils.js 工具方法，也包括对 jquery、lodash 的依赖的使用定义；
  • /test
  • webpack.config.build.js 发布到 NPM - TextWrapPX 前，需要在根目录执行命令 npm run build 来启动 webpack 打包；
  • webpack.config.dev.js 本地启动实时 server 开发测试的 webpack 配置文件，命令：npm start
  • webpack.config.docs.js 推送并更新 Github-Pages 在线示例页面的 webpack 配置文件，命令：npm run docs；注意，该打包出来的文件需要提交在 gh-pages 分支；

项目源码

切换到你的工作目录，分别执行以下命令，将源码克隆到你的本地，并安装所有依赖（需要 nodejs 环境）：

git clone https://github.com/WeiFei365/text-wrap-px.git
cd text-wrap-px
npm install

重新 build

如果你不满意发布当前发布在 NPM - TextWrapPX 上的输出文件，可以根据你的需求对应更改部分文件来重新打包，并将新打包出来的文件拷贝到你的项目中使用；这里列举一种情况：将 jquery、lodash 一定打包到输出文件中：

  • 打开文件：webpack.config.build.js，并删除该行：externals: ['jquery', 'lodash'],
  • 然后在 TextWrapPX 项目根目录执行命令：npm run build，结束后，将生成的打包文件 /build/text-wrap-px.js 拷贝到你的项目中，像正常的使用即可；

优化、开发

请在TextWrapPX 项目根目录执行命令：npm start，然后按需要更改 /scripts 或 /examples 目录下的文件，并打开浏览器查看：http://localhost:8080/ 中的表现

results matching ""

    No results matching ""