日常Node踩坑

为什么我一直不喜欢用模块化、工程化的现代化技术来做前端呢

第一因为自己技术力太弱
第二是 npm 的坑太多了

但即使是坑还是要踩的,不然真的永远都只能停留在用 jQuery 的地步,而现在都8102年了

起先搞出了 v1.0 后想着把设置的东西放到另一个文件上,以模块的形式加载过来,这样就可以不用更改主 js 文件里的东西了,也减少了一些莫名其妙的风险。然后……

这都8102年了,Chrome版本都69了,居然不支持 import 和 export?开什么玩笑…
有问题,找谷歌,然后有三个答案:

  1. 对想要建立成模块的文件采用type="module"的方法
  2. 使用动态的 import()
  3. 使用 CommonJSrequire 功能

在三种方式都尝试失败后,才想起来:Chrome 至今都10年了依然不支持完整的 ES6 语法。那就退回 ES5 吧,用 Babel

于是用 Babel 的话就得用 webpack 了,一直以来个人非常讨厌 webpack,原因就是:在国内的网络Network下 npm 总是安装失败,而且一拖 npm 弄了太多东西。不过坑还是要踩的

在谷歌的帮忙下终于配置好了 webpack 和 package。然后发现 webpack 根本没法初始化:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.configuration.module has an unknown property 'loaders'. These properties are valid:

一看才知道,在 webpack 版本从2开始就已经不再支持 module 下用 loaders 了,而是采用了 rules 这个写法了。虽然有点坑,但还好顺利解决了。于是写完配置,cnpm install一下,然后平稳将1.0的东西放过来。然后编译Compiler一下就: [HMR] Hot Module Replacement is disabled了。一查少个配置少了个插件

     plugins: [
    new webpack.HotModuleReplacementPlugin()]

把这个配置加上去就稳了,但注意如果 plugins 下有其他插件的话,记得加逗号分隔开,虽说是个低级错误,但也遇到了几次

然后就想着别人的项目都是使用npm run start之类来部署运行的,而我这个只能用 webpack 命令打包后手动点链接,这也太没逼格了……

然而我并没有那技术力,于是再次请出谷歌,得知:

  1. 先使用 npm install webpack-dev-server --save-dev 给自己的项目配置webpack 本地服务Services
  2. 修改 package.json 配置 script:
      "scripts": 
    {
      "start": "webpack-dev-server --env development",
      "build": "webpack --env production"
     }

这样就能在命令行Command-line中使用 npm run start 来自动打包编译并打开浏览器了。于是第三个坑也成功填掉

在这样一系列下来天亮了………

正好把 v2.0写完了传上 GitHub 了,也给自己的副站点使用了下,感觉还行……

webpack 在不会用的时候就感觉是魔鬼,但真的用了之后,真的很方便,难怪现在前端越来越讲究脚手架,越来越讲究模块化、工程化了。虽然 jQuery 制霸的时代已经过去了,但 jQuery 依然有其存在的必要性。各种新技术的冲击下只会一个 jQuery 已经无法适应现在了 何况你也没多会 jQuery
感谢谷歌,节省了不少时间,也不用去傻乎乎当伸手党了,这种基础Base的东西,还是让不会给你脸色看的搜索引Index擎包了吧,搜索引擎不会跟你耍脸色……

想想看接下来,应该会把这个项目的代码优化下,以及提高下可编辑性,不过都做到这地步了,为什么不用 Vue 或者 React 重写呢……

因为我真的忘了学,学了忘啊…

Last modification:October 13th, 2018 at 11:49 pm

Leave a Comment