Sign in Subscribe
webpack

前端模块化小史，Webpack 入门

30 min = 15 min * 2

[slide data-on-enter=”incallback”]

function incallback() {
  setTimeout(function () {
    alert('Done is better than perfect.  -  via Facebook')
    document.getElementById('incallback').innerHTML = 'Welcome to my session!'
  }, 300)
}

[slide]

前端模块化小屎史，Webpack 入门

by Jimmy Lv

[slide]

模块化管理？

[slide]

JavaScript 模块化

  • ES6 Module {:&.fadeIn}
  • CommonJS
  • AMD
  • UMD

[slide data-on-leave=”outcallback”]

现在即未来：ES6 模块规范

// profile.js
var firstName = 'Michael'
var lastName = 'Jackson'

var sayHi = () => {
  console.info('I am ' + firstName + ',' + lastName + '!')
  console.info(`I am ${firstName}, ${lastName}!`)
}

export { firstName, lastName, sayHi }

// main.js
import { firstName, lastName, sayHi } from './profile'

import * as profile from './profile'
profile.sayHi()

[slide]

民间两大规范

  • CommonJS: 同步加载，主要用于 NodeJS 服务器端；
  • AMD: 异步加载，通过 RequireJS 等工具适用于浏览器端。

[slide]

过去式：CommonJS 规范

NodeJS: JavaScript 要逆袭！我是窜天 🐵，我要上天！


var firstModule = require('firstModule')

//playing code...

module.export = anotherModule

[slide]

JavaScript 组件发布平台：NPM


🐒🐒🐒🐒🐒：前端项目要是能在浏览器中更方便地使用 NPM 资源就好了！

[slide]

过去式：AMD 规范

即 (Asynchronous Module Definition) {:&.pull-right}
define(['firstModule'], function (module) {
  //playing code...

  return anotherModule
})

[slide]

Browserify.js

🐒🐒🐒🐒🐒：要是能在浏览器使用 require 同步语法加载 NPM 模块就好了！


var firstModule = require('firstModule')

//playing code...

module.export = anotherModule

define(['firstModule'], function (module) {
  //playing code...

  return anotherModule
})

[slide]

「通用」模式：UMD

即 (Universal Module Definition) {:&.pull-right}
;(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(['jquery'], factory)
  } else if (typeof exports === 'object') {
    // Node, CommonJS
    module.exports = factory(require('jquery'))
  } else {
    // 浏览器全局变量(root 即 window)
    root.returnExports = factory(root.jQuery)
  }
})(this, function ($) {
  //    方法
  function myFunc() {}
  //    暴露公共方法
  return myFunc
})

[slide]

前端工程化需求

前端模块化框架肩负着 模块管理、资源加载 两项重要的功能，这两项功能与工具、性能、业务、部署等工程环节都有着非常紧密的联系。因此，模块化框架的设计应该最高优先级考虑工程需要。


  • 依赖管理 {:&.rollIn}
  • 按需加载
  • 请求合并

[slide]

关键原因就在于「纯前端方式只能在运行时分析依赖关系」

[slide]

新思路：「不」在运行时分析依赖。

  • 借助构建工具来做线下分析:


利用构建工具在线下进行模块依赖分析，然后把依赖关系数据写入到构建结果中，并调用模块化框架的依赖关系声明接口，实现模块管理、请求合并以及按需加载等功能。

[slide]

主角：Webpack

「任何静态资源都可以视作模块，然后模块之间还可以相互依赖。」

[slide]

特性

  1. 兼容 CommonJS 、 AMD 、ES6 语法 {:&.rollIn}
  2. 支持打包 JS、CSS、图片等资源文件
  3. 串联式 loader 以及插件机制
  4. 独立配置文件 webpack.config.js
  5. 代码切割 chunk，实现按需加载
  6. 支持 SourceUrls 和 SourceMaps
  7. 具有强大的 Plugin 接口，使用灵活
  8. 支持异步 IO 并具有多级缓存，增量编译速度快

[slide]

一个简单的 React 例子

// hello.js
import React, { Component } from 'react'

class Hello extends Component {
  render() {
    return <div>Hello, {this.props.name}!</div>
  }
}

export default Hello

// entry.js
import React from 'react'
import Hello from './hello'

React.render(<Hello name="Jimmy" />, document.body)

[slide]

Webpack 配置文件

// webpack.config.js
var path = require('path')

module.exports = {
  entry: path.resolve(__dirname, './src/entry.js'),
  output: {
    path: path.resolve(__dirname, './assets'),
    filename: 'bundle.js',
  },

  module: {
    loaders: [{ test: /\.js?$/, loaders: 'babel-loader', exclude: /node_modules/ }],
  },

  resolve: {
    extensions: ['', '.js', '.json'],
  },
}

[slide]

打包完毕

// index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React Sample</title>
</head>
<body>
<script src="./assets/bundle.js"></script>
</body>
</html>

[slide]

实战：重构现有项目

  • 代码热加载
  • 配置 NPM Script
  • babel-loader: 预编译 ES6
  • ng-annotate-loader: 确保依赖安全注入
  • less-loader: 使用 Less 替换 CSS
  • ngtemplate-loader: String 化 HTML 模板

[slide]

代码热加载：webpack-dev-server

webpack-dev-server 是一个基于 Express.js 框架的静态资源 Web 服务器。开发服务器会监听每一个文件的变化，进行实时打包，并推送通知给前端页面，从而实现自动刷新。


 module.exports = {
    entry: {
        app: ['webpack/hot/dev-server', './app.js']
    },
    output: {
        path: './assets',
        filename: 'bundle.js'
    },
    ...
}

默认端口 8080：localhost:8080/webpack-dev-server/

[slide]

配置 NPM Script

"scripts": {
    "dev": "webpack -w --bail --display-error-details",
    "start": "webpack-dev-server --history-api-fallback --hot --inline --progress",
    "build": "webpack -p"
}

npm run dev # 提供 watch 方法，实时进行打包更新并打印出错信息
npm start # 启动服务器，浏览器直接访问的是 index.html
npm run build # 输出 production 环境下的压缩打包代码

[slide]

babel-loader 预编译 ES6

module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/,
        loader: 'ng-annotate!babel?presets=es2015'}
    ]
}

require('./style/base.less')

import angular from 'angular'
import ngRoute from 'angular-route'

import githubService from './app/services/githubService'
import MainCtrl from './app/controllers/mainController'
import Components from './app/components/components.module'

[slide]

ng-annotate-loader 依赖安全注入

controller($http, $routeParams, base64) {
    'ngInject';

    var vm = this;

    vm.$onInit = () => {
        ...
    }
}

controller:["$http","$routeParams","base64",function(e,t,n){"ngInject" ...}]

[slide]

使用 Less 替换 CSS

{test: /\.less$/, loader: "style!css!less"},

{test: /\.(eot|woff|woff2|ttf|svg)(\?\S*)?$/,
    loader: 'url?limit=100000&name=./fonts/[name].[ext]'},
{test: /\.(png|jpe?g|gif)$/,
    loader: 'url-loader?limit=8192&name=./images/[hash].[ext]'}

import '../../node_modules/font-awesome/css/font-awesome.css'
import '../../assets/styles/bootstrap.css'
import '../../assets/styles/yue.css'
import '../../assets/styles/base.less'

[slide]

String 化 HTML 模板

{test: /\.html$/, loader: 'ngtemplate!html?attrs[]=img:src img:ng-src'}

import './post.less'

export default {
  templateUrl: require('./post.html'),
  bindings: {
    pageContent: '<',
    showToc: '<'
  }
  controller() {
    ...
  }

import post from './post/post'

export default angular.module('app.note', []).component('post', post)

[slide]

AngularJS 组件结构

app/
├── app.js
├── commons
│   ├── commons.module.js
│   ├── footer
│   │   ├── footer.html
│   │   └── footer.js
│   ├── header
│   │   ├── header.html
│   │   ├── header.js
│   │   └── header.less
├── configs
│   ├── app.config.js
│   ├── app.routes.js
│   ├── app.run.js
│   └── configs.module.js
├── features
│   ├── features.module.js
│   ├── apps
│   │   ├── apps.html
│   │   └── apps.js
│   └── note
│       ├── note.html
│       ├── note.js
│       ├── note.less
│       ├── note.module.js
│       ├── page
│       │   ├── page.html
│       │   ├── page.js
│       │   └── page.less
│       ├── post
│       │   ├── post.html
│       │   ├── post.js
│       │   └── post.less
└── services
    ├── githubService.js
    ├── musicService.js
    └── services.module.js

[slide]

「越痛苦的事情越要早做」

var path = require('path')
var webpack = require('webpack')

module.exports = {
  context: __dirname,
  entry: {
    app: ['webpack/hot/dev-server', './app/app.js'],
  },
  output: {
    path: './dist',
    filename: 'bundle.js',
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'ng-annotate?add=true!babel-loader',
      },
      { test: /\.css$/, loader: 'style!css' },
      { test: /\.less$/, loader: 'style!css!less' },
      {
        test: /\.(eot|woff|woff2|ttf|svg)(\?\S*)?$/,
        loader: 'url?limit=100000&name=./fonts/[name].[ext]',
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        loader: 'url-loader?limit=8192&name=./images/[hash].[ext]',
      },
      { test: /\.html$/, loader: 'ngtemplate!html?attrs[]=img:src img:ng-src' },
    ],
    noParse: [],
  },

  plugins: [new webpack.HotModuleReplacementPlugin()],

  resolve: {
    extensions: ['', '.js', '.json'],
    alias: {
      react: './pages/build/react',
    },
    modulesDirectories: ['node_modules', 'bower_components'],
  },
}

[slide]

NoBackend Website

Read next

【双向链接的前世今生】上都计划与 Roam Research 思维工具

【双向链接的前世今生】上都计划与 Roam Research 思维工具

* （后续）修订版：https://jimmylv.noto.so/xanadu * 少数派：🔗 https://sspai.com/post/72995 🔗 对我来说，我在很久之前就一直在探索知识管理、任务管理，这方面是我一直以来非常热衷的兴趣点。本文是我第一次系统性地介绍双向链接是什么，会先为你讲述 Roam 的 3 个故事，然后专注于解释 Roam Research最核心的 1 个功能：双向链接（当然，Roam 还有很多其他好玩的地方）。最后，我会介绍自己的 2 个应用场景，以及什么是 Tools for Thought 和为什么你需要一款思维工具？ 一、Roam 的 3 个故事，源自上都计划 故事 1：@Ted
吕立青
我是如何艰难地克服「效率成瘾」的？

我是如何艰难地克服「效率成瘾」的？

作为一个效率工具爱好者，也是一个效率产品的从业者，天然地就会去把玩各种各样的 App 或者是软件。我还记得我在大学的时候有打开 Firefox 的扩展商店，玩各种各样的插件，甚至连玩插件都能够玩上一个通宵，当然这是非常不健康的。 而到了工作以后，我还是会定期下载手机上的 App 来玩，很多时候都会去应用商店里面试用各种各样新鲜的 App，经常会找限免或者是“最美应用”这样的平台去发现新的效率工具，后来越来越意识到自己陷入了「效率成瘾」或者是叫 Productivity Porn（效率色情），于是开始自己寻找药方。 药方 1：玩具属性 vs 工具属性 效率色情（aka 生产力色情）这个词最早出现于《生活黑客》这本书，书中写到 Porn 这样一个词，其实是「对某件事情上瘾」的一种描述，不只是说对色情内容上瘾，而是你对其他的内容像是生产力工具，或者是各种各样的时间管理方法的无止限追求，都可以称之为 Porn。 比如说武侠或者是枪战动作片，
吕立青
“罗马不是一天建成的”：Roam Research 101 系列之每日笔记与页面引用

“罗马不是一天建成的”：Roam Research 101 系列之每日笔记与页面引用

零、Roam Research 101 系列的初衷 欢迎来到 Roam Research 宫殿，Roam 的门槛其实很低，但是天花板特别高。 Pantheon 罗马万神殿 “天使的设计” 最近一直在思考如何升级漫游研究所 Roam Newsletter（🆓 Substack 邮件订阅）的内容形式，想要更好地组织关于思维工具和知识创造的内容。 而且现在中文社区还没有一份完整的 Roam Research 系列教程，#roamcult 的社区氛围反而又难住了部分初学者。 0.1 Roam 的低门槛和高天花板 关于低门槛的内容，我想仿照 @少楠 的 Flomo 101 学院 做一个 101 系列，包括 Roam Research 入门干货和自我管理与知识创造的基本原则。 因为许多时候我们需要改变的不是工具，而是我们使用工具的思维方式。 突破天花板的事情，作为程序员的我一直都比较热衷，
吕立青