Skip to content

RiskySignal/werun

Repository files navigation

WeRun Template Project

💡 Note:
 我们的前端模板工程应该有:插件组件应用环境及编辑器等配置
🔋 Done:
1.   插件编辑器 的配置
2.   完成了部分 插件 的功能,并且对插件增加了 测试 模块
3.   组件应用 的配置
4.   开始 应用 的开发
⌛ Todo:
1.   接下来继续写一部分我们常用的 插件,然后进行 组件 配置
2.   开始我们的实验室主页应用





Install

1. Clone a copy

git clone https://github.com/hellochicken/werun.git

2. Install Nodejs Modules

npm i

3. Run

npm run scripts

💡 Note:
 可以在 package.json中找到相应的 npm命令





Troubles with Webpack

💡 Note:
 配置 webpack 是一件 极其头疼 的事情,要耐下心来不断调试
👍Thanks:
 感谢 webpackwebpack 中文社区,现在的 webpack 文档更加明了了

  • AMD Define Function

    • 问题: 搭建这个项目的 plugin 模块时,我参考了 jQuery 的源码,发现 jQuery 在源码中使用了 AMD 标准的 define 语法,但是打包以后却不存在define关键字,同样也不存在任何对 requirejs 的引入,匪夷所思
    • 相关查找jQuery 自实现的 Grunt 插件
    • 解决方法:从上面问答可以看到,原来并不是我的操作有什么问题,jQuery 自己制作了一个 Grunt 插件去除了相应的define。我在 webpack 中用babel-loaderdefine进行转译,生成的文件中是 webpack 自定义的__webpack_require__方法,同样能在浏览器中实现
    • 相应猜测:可以看到,jQuery 使用的方式是去除define,将插件各个模块的作用域提升到同级,这样可能带来的问题便是命名域的冲突。但对比 webpack 这种打包结果,jQuery 可能想做的是提高它在浏览器中的运行效率,因为这样做可以减少大量的闭包
  • ESLINT

    • 问题:在 webpack 中加入 eslint 时,发现第一次设置好用,但是后面无论如何修改 .eslintrc.js.eslintignore 文件中的配置,再次编译都没有任何变化
    • 相关链接Cache doesn't bust when .eslintrc changes
    • 解决方法:经过两天的调试,发现时eslint-loader中设置了cache: true导致它自动缓存了配置的相关信息,所以无论你怎么修改配置,它都没有任何变化!所以,在配置的时候,朋友,记得设置cache: false!(ps:我们调试了半天,发现这个问题,想去提个issure,发现19天前有人提了,还能说什么呢,查资料需仔细啊!)
  • Karma with Jasmine

    • 问题:使用 Karma、Jasmine 作为我们的整一个测试框架,可以看到 Jasmine 的默认单元测试样例中有一个helper,但是我们起初简单配置完后,运行测试报错:helper中方法不存在
    • 相关链接Jasmine Spec Helpers not loaded
    • 解决方法:从上文中可以看到,原因在于helper不在编译目录中,导致的出错。所以我们在karma.config.js文件中应该这样设置
{
  // ...more
  "files": ["spec/**/*[sS]pec.js", "spec/helpers/**/*[hH]elper.js"],
  "preprocessors": {
            "spec/helpers/**/*[hH]elper.js": ["webpack"],
            "spec/**/*[sS]pec.js": ["webpack"]
        },
  // ...more
}
  • Use BootStrap with Webpack & React
    • 问题:一开始配置react-bootstrap的时候,我总是好高骛远,先要用看起来很炫酷的方式去配置,但总是出现这样那样的问题
    • 相关链接直接导入 bootstrap 的方式
    • 相关链接直接使用 react-bootstrap 的方式
    • 相关链接使用 react-bootstrap 配置 bootstrap-loader 的方式
    • 相关链接使用 bootstrap-webpack 的方式
    • 解决方法: 方案1是果断放弃的,因为已经用了react,如果不用react-bootstrap的话,未必太低效率了一点;方案4我没有试过;方案3是我一开始尝试的,尝试了很久,才做到大致能够使用,但是还有这样那样的问题,而且如果我用react的话,我觉得再加载jquery这个库的做法不是很合理,并且会导致网页开始必须要加载特别多的库,网页的首次加载时间也会特别长;最后我采用了方案2,很简洁明了,直接加载,可以自己配置bootstrap的样式,也可以使用CDN的方式引入,而且完全不需要依赖jquery,tether那些库(这些库本身是用来支持bootstrap.js的),在webpack中的配置如下:
  {
    entry: {
      // ...
      bootstrap_bundle: ["react-bootstrap", resolvePath("../../src/external-source/css/bootstrap.css")]
    },
    plugins: [
      // ...
      new webpack.optimize.CommonsChunkPlugin({
          name: [
              // 这里可能会出现一点问题,如果你关注webpack的打包明细的话,你会发现,如果将这两个bundle的顺序进行更换,就会导致所有的js内容都被打包进了bootstrap_bundle
              "bootstrap_bundle",
              "react_bundle",
          ],
          filename: "js/[name].js",
          minChunks: Infinity
      }),
      new webpack.ProvidePlugin({
          React: "react",
          ReactDOM: "react-dom",
          PropTypes: "prop-types",
          Bootstrap: "react-bootstrap"
      })
    ]
  }

💪 Suggesion:
 配置 webpack 的时候你应该一步一步地进行配置,不能上来便想要配置全部的插件。例如,配置 Karma+Jasmine 时,你不应该同时配置这两个选项,即使时网上查找到相应的教程,你也很难一步到位
🔨 More:
 遇到的问题,也许我能帮到你。

COME ON

About

What I test to do when I am a werun guy!

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published