从webpack的使用浅谈npm包的全局安装

Oct 3, 2015

4498

博客挺久没更新了,感觉还是偏懒了一些。从迅雷离职到进入新公司也有一段时间了,目前在新公司主要参与工作流程优化,其中包括自动化工具的开发、组件平台搭建等等,进一步接触node.js。本文主要简述在工作上一些npm包全局安装带来的问题以及解决的方法。

这里以webpack为例来说,《React结合Webpack使用》这篇文章中演示的例子Todos,webpack、webpack-dev-server都是采用全局安装的方式,这时候其他用户从Github上获取代码之后,他需要执行以下两步操作才能把依赖以及工具下载下来。这些我都得在README.md中一一说明,README.md会显得比较长,步骤也比较繁琐。

npm install
npm install -g webpack webpack-dev-server

其二,Todos是我几个月前写的,webpack用的是当时最新的版本,假如现在版本更新了,废弃了一些参数,用户全局安装最新的版本,可能就会执行失败。这种情况在一些老的代码经常出现。

针对以上两个已知的问题,可以利用npm包的一些特性来处理的。

React结合Webpack使用

June 30, 2015

3824

Todo的代码已经更新到了React0.14,React0.14分为react和react-dom两部分。如果想查看之前的代码,可以在github上切换到分支react0.13。

最近在学习React,配合Webpack使用使得开发和调试变得方便多了。这几天抽空采用React和Webpack写了一个手机单页面应用,演示地址:http://lab.crazycoder.cc/todo。本文主要记录Webpack与React配合使用的过程(采用node.js来处理)。

1、React

React组件拥有比较灵活的结构,可采用JSX来编写,代码比较简洁。同时React实现一个虚拟DOM树,用于浏览器减少重绘和重排等等。

npm install react --save

2、Webpack

webpack是一个模块加载器,特别灵活,能够像node.js解析代码中的依赖,将代码进行打包等等。

npm install -g webpack

webpack安装完后,需要配置,默认配置文件为webpack.config.js,大概配置如下

var path = require('path');

module.exports = {
  entry: [path.resolve(__dirname, 'app/main.js')],
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js', 
  },
  module: { //loaders
  }
};

module中主要是配置一些加载器如css、babel等,后面会给出详细的配置。

Wen's Blog

文章归档 » 文章标签 » 博主:吴文伟,Web开发爱好者,专注于前端开发,该博客用于记录和分享平时遇到的一些问题以及知识。

订阅

联系方式

链接