文档章节

webpack共用于前后端的小坑

L3ve
 L3ve
发布于 2016/06/14 16:17
字数 1089
阅读 271
收藏 2

好久好久没写文章了,在一年前接触React之后,大量的学习实在没空也没有实力来写相关的文章.怕误人子弟,简单相关的文章又是漫天飞,没必要....

现在JavaScript好叼,React能做PC和H5,React Native能搞定移动APP,桌面APP有Electron.可以说无所不能,当然最厉害的还是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本来就是前端的构建工具,之后也看过人家评价webpackglup,就说webpack什么都不错,就是对后端支持不好.

虽然问题解决了,但是这办法不是一般的暴力, 对于node的依赖我们并不能很准确的获取到,所以nodeModules这个值没办法确定,而这位歪果仁的办法居然是引入了所有node_modules来编译筛选...我服了,但暂时也想不出其他办法....求各位大神指点

最后吐槽下:webpack固然是个好东西,但是内部不是一般的复杂,而且看他的文档那个酸爽,反正我这种英语白痴基本上就是GG了.感觉最近有点浮躁,而且学了好多东西,都没有很好地消化,是时候来一波沉淀了,先把JavaScript忍者秘籍看完了,再看数据结构与算法的那本,准备好离开广州到杭州去,本来还预想10月走人,讲道理,看来是不可能的呀.

相关文章: 1 Backend-Apps-with-Webpack--Part-I

© 著作权归作者所有

共有 人打赏支持
上一篇: 谈谈React
L3ve
粉丝 10
博文 28
码字总数 14006
作品 0
浦东
程序员
私信 提问
加载中

评论(2)

L3ve
L3ve

引用来自“donson”的评论

我可以转载吗?0
当然可以...成哥44
donson
donson
我可以转载吗?0
webpack学习笔记——入门篇:通俗理解webpack

前言 (在过去)对我这种渣渣来说,在项目里面一旦配置好了webpack之后,就再也不想碰这玩意儿了,因为实在是太多的坑。。。使用一个插件可能要把config文件改个十几二十遍,还得不断地跑起来...

Eason_Wong
07/16
0
0
React 技术栈系列教程

上周中秋节,我待在家里,写完了 Redux 教程。 至此,《React 技术栈系列教程》算是比较完整了。 ES6 语法:教程 Babel:教程 React:教程,示例库 Webpack:教程 React 项目脚手架:代码库 ...

阮一峰
2016/09/23
0
0
vue.js环境搭建

在这个JS入侵前后端的形势下,不会JS的Androider不是好Androider,所以就从零来学习一下在前端大火的vue框架,今天我就记录下vue.js的环境搭建过程。 我的安装平台是MacOS 10.12.1版本,Win...

juexingzhe
2017/11/07
0
0
weui-react项目实战新心得

weui-react简介 weui是微信官方制作的一个基础样式UI库,打造与原生微信同样的视觉和交互体验,整个UI库包括网页版和小程序版,网页版包括传统的javascript版和react版本。 个人对react的偏爱...

IT米粉
04/01
0
0
搭建现代的 Karma 测试环境

也可以在这里看:https://leozdgao.me/modern-karma/ 之前写过的测试都是针对简单的工具方法,用的 mocha + chai 写,最近在研究前端路由,想写写测试代码,遇到 ,突然意识到前后端的差异问...

leozdgao
2016/03/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

腾讯与Github的魔幻会面背后的故事…

10月22日,腾讯开源管理办公室有幸邀请到Github新晋CEO Nat Friedman,前来鹅厂参观交流。目前腾讯已经有近70个项目在Github上开源,共获得17w stars,世界排名11位。Github是腾讯开源的主阵...

腾讯开源
25分钟前
1
0
单例模式

单例模式(Singleton pattern)属于创建型设计模式。 保证一个类仅有一个实例,并提供一个访问它的全局访问点。 通常我们可以让一个全局变量使得一个对象被访问,但它不能防止你实例化多个对...

NinjaFrog
30分钟前
0
0
TypeScript基础入门之装饰器(三)

转载 TypeScript基础入门之装饰器(三) 继续上篇文章[TypeScript基础入门之装饰器(二)] 访问器装饰器 Accessor Decorator在访问器声明之前声明。 访问器装饰器应用于访问器的属性描述符,可用...

durban
47分钟前
2
0
spring5调研学习(转载)

Spring框架的新功能 这一章主要提供Spring框架新的功能和变更。 升级到新版本的框架可以参考。Spring git。 内容列表 Spring 5.x框架新的功能 Spring 4.x框架新的功能 Spring 3.x框架新的功能...

小海bug
58分钟前
2
0
为何Spring框架能这么流行?

想要学习更多关于Spring框架在Java开发者中如此流行?看这篇文章可以学到更多! Spring框架特性 Spring是用于应用开发中的一款强大,轻量级框架。更广泛地说,你可以认为Spring框架是一个定义...

java知识分子
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部