好久好久没写文章了,在一年前接触React之后,大量的学习实在没空也没有实力来写相关的文章.怕误人子弟,简单相关的文章又是漫天飞,没必要....
现在JavaScript好叼,能做PC和H5,能搞定移动APP,桌面APP有.可以说无所不能,当然最厉害的还是PHP,JavaScript只能是世界第二.
不吹了回归主题,这次的坑就是在用Electron的时候遇到的.
先看下Electron是个什么东西:
The Electron framework lets you write cross-platform desktop applications using JavaScript, HTML and CSS. It is based on Node.js and Chromium and is used by the Atom editor and many other apps.
所以他的特殊性导致了我要用webpack同时编译前后端的js代码,前端主要还是React来构建view,和babel来编译ES6,而后端就不用说了肯定是node.
一开始webpack.config.js是长这样子的(只列出重要的部分,要看完整的)
module.exports = { //入口文件 entry: { base: ['css/animation', 'css/actrace'], enter: [ 'js/enter' ] }, target: 'node’, //因为前端用ES6,所以这里把target设为node,也可以编译 //输出 output: { path: 'assets', publicPath: 'assets', libraryTarget: 'umd', //打包成模块(库),可加装 umdNamedDefine: true, //同上 filename: "[name].js" }}; 然而编译后运行时报了个错.(leveldown是个node模块,算是一个数据库咯) 
很明显,我不可能蠢到没有npm install,肯定是编译之后找不到包了,稍微看了看编译后的enter.js的源码,压根就没有引入到levedown的包,这无非就是babel或者webpack的问题,编译只经过了这2个家伙.
一开始我以为是babel的问题,因为babel编译ES6的时候是用到import,export,我就想应该是编译后模块不兼容的问题,因为babel6需要自己引入插件,然后试过下面这几个插件之后还是呵呵了
es2015-modules-amd
es2015-modules-commonjs
es2015-modules-systemjs
es2015-modules-umd
之后,又因为工作的缘故沉寂了一段时间.一次机缘巧合看到这这篇,问题就迎刃而解了,主要还是webpack的原因,用正确姿势打开webpack.config.js是长这样子的
var webpack = require('webpack');var path = require('path');var fs = require('fs');//这里是重点var nodeModules = {};fs.readdirSync('node_modules') .filter(function(x) { return ['.bin'].indexOf(x) === -1; }) .forEach(function(mod) { nodeModules[mod] = 'commonjs ' + mod; });module.exports = { entry: './src/main.js', target: 'node', output: { path: path.join(__dirname, 'build'), filename: 'backend.js' }, externals: nodeModules //这里是重点} 关于webpack的externals的文档.大概的意思就是让webpack不去处理这里面的依赖,不会打包进最后的js文件里,这样这些依赖就会根据运行环境去引用.
本来webpack会根据import的依赖,将各个包压缩到js里,然后通过类似于switch给各个模块一个号码,从而来引入这些模块
原因大概就是因为node的包有可能有些二进制的依赖,且并对webpack的这种编译方式并不友好,想想也是webpack本来就是前端的构建工具,之后也看过人家评价webpack和glup,就说webpack什么都不错,就是对后端支持不好.
虽然问题解决了,但是这办法不是一般的暴力, 对于node的依赖我们并不能很准确的获取到,所以nodeModules这个值没办法确定,而这位歪果仁的办法居然是引入了所有node_modules来编译筛选...我服了,但暂时也想不出其他办法....求各位大神指点
最后吐槽下:webpack固然是个好东西,但是内部不是一般的复杂,而且看他的文档那个酸爽,反正我这种英语白痴基本上就是GG了.感觉最近有点浮躁,而且学了好多东西,都没有很好地消化,是时候来一波沉淀了,先把JavaScript忍者秘籍看完了,再看数据结构与算法的那本,准备好离开广州到杭州去,本来还预想10月走人,讲道理,看来是不可能的呀.
相关文章: 1