为什么我一直不喜欢用模块化、工程化的现代化技术来做前端呢
第一因为自己技术力太弱第二是 npm 的坑太多了
但即使是坑还是要踩的,不然真的永远都只能停留在用 jQuery 的地步,而现在都8102年了
起先搞出了 v1.0 后想着把设置的东西放到另一个文件上,以模块的形式加载过来,这样就可以不用更改主 js 文件里的东西了,也减少了一些莫名其妙的风险。然后……
这都8102年了,Chrome版本都69了,居然不支持 import 和 export?开什么玩笑…
有问题,找谷歌,然后有三个答案:
- 对想要建立成模块的文件采用
type="module"
的方法 - 使用动态的
import()
- 使用
CommonJS
的require
功能
在三种方式都尝试失败后,才想起来:Chrome 至今都10年了依然不支持完整的 ES6 语法。那就退回 ES5 吧,用 Babel
于是用 Babel 的话就得用 webpack 了,一直以来个人非常讨厌 webpack,原因就是:在国内的网络下 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的东西放过来。然后编译一下就: [HMR] Hot Module Replacement is disabled
了。一查少个配置少了个插件
plugins: [
new webpack.HotModuleReplacementPlugin()]
把这个配置加上去就稳了,但注意如果 plugins 下有其他插件的话,记得加逗号分隔开,虽说是个低级错误,但也遇到了几次
然后就想着别人的项目都是使用npm run start
之类来部署运行的,而我这个只能用 webpack
命令打包后手动点链接,这也太没逼格了……
然而我并没有那技术力,于是再次请出谷歌,得知:
- 先使用
npm install webpack-dev-server --save-dev
给自己的项目配置webpack 本地服务器 - 修改
package.json
配置 script:
"scripts":
{
"start": "webpack-dev-server --env development",
"build": "webpack --env production"
}
这样就能在命令行中使用 npm run start
来自动打包编译并打开浏览器了。于是第三个坑也成功填掉
在这样一系列下来天亮了………
正好把 v2.0写完了传上 GitHub 了,也给自己的副站点使用了下,感觉还行……
webpack 在不会用的时候就感觉是魔鬼,但真的用了之后,真的很方便,难怪现在前端越来越讲究脚手架,越来越讲究模块化、工程化了。虽然 jQuery 制霸的时代已经过去了,但 jQuery 依然有其存在的必要性。各种新技术的冲击下只会一个 jQuery 已经无法适应现在了 何况你也没多会 jQuery。
感谢谷歌,节省了不少时间,也不用去傻乎乎当伸手党了,这种基础的东西,还是让不会给你脸色看的搜索引擎包了吧,搜索引擎不会跟你耍脸色……
想想看接下来,应该会把这个项目的代码优化下,以及提高下可编辑性,不过都做到这地步了,为什么不用 Vue 或者 React 重写呢……
因为我真的忘了学,学了忘啊…