国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

告別繁瑣重復的webpack配置,直接上手擼代碼

gghyoo / 2528人閱讀

摘要:也就是說,和是兩個相互獨立的處理單元。那么這樣給我們帶來什么便利呢如果中出錯,在中是不被察覺的。后面加入的入口,不影響入口,所以之前對的是依然生效的。只需要執行,就可以直接看到啦預覽效果預覽愛奇藝效果預覽最后,歡迎各位

大家伙有沒有這么一個煩惱:

想寫一些簡單的前端Demo,卻被繁瑣的webpack配置給惡心到?
于是乎便有了go-js的存在,我們只需要執行全局安裝go-js,執行gojs指令,便可以執行前端代碼
使用

執行如下bash腳本:

npm install -g go-js

mkdir workspace
cd workspace
echo "import $ from "jquery"
$(document.body).html("

GO!JS!

")" > jq.js # 執行并打開瀏覽器 /jq.js gojs -i jq.js # 以 jq.js 為入口文件進行打包,將打包進入當前目錄下的 .dist/ 文件夾 gojs -b jq.js

同時支持自定義html模板,在同級目錄下新建 jq.html 便會使用 jq.html 作為模板

于是便會自動安裝 jquery 依賴,并打開瀏覽器,enjoy it!

概念

gojs 認為一個js文件就是一個入口(entry),也對應一個webpack compiler

特征

程序運行時,自動下載依賴包

入口動態添加
如,文件目錄結構如下:

go-js-test/
├── a/
│   ├── a/
│   ├── jq.html
│   ├── jq.js
│   ├── style.css
│   └── style.less
├── jq.js
└── react.js

1.在 go-js-test/ 下執行 gojs .
2.請求 /jq.js
3.添加 jq.js 至入口中, webpack building....
4.請求 a/jq.js
5.添加 a/jq.js 至入口中, webpack building....

顆粒化 webpack compiler 和 HMR 的處理
在第二點(入口動態添加)中,對于jq.js和a/jq.js兩個入口,分別各自對應webpack compiler 和 HMR 單元。
也就是說,jq.js和a/jq.js是兩個相互獨立的webpack處理單元。
那么這樣給我們帶來什么便利呢?

1. 如果jq.js中出錯,在a/jq.js中是不被察覺的。
2. 后面加入的a/jq.js入口,不影響jq.js入口,所以之前對jq.js的webpack bundle cache是依然生效的。(對比與 一股腦將2個入口重新用一個webpack單元處理)

支持自定義loaders,在工作目錄下命名文件 gojs.jsloader.js
默認loader為:

module.exports = [
  {
    test: /.jsx?$/,
    loader: "babel-loader",
    include: [
      // root
    ],
    query: {
      cacheDirectory: true,
      presets: [
        require.resolve("babel-preset-es2015"),
        require.resolve("babel-preset-react"),
        require.resolve("babel-preset-stage-0")
      ],
      plugins: [
        require.resolve("babel-plugin-transform-decorators-legacy"),
      ]
    }
  },

  {
    test: /.css$/,
    exclude: [
      /.mod.css/,
      /.use(able)?.css/
    ],
    loaders: [
      "style-loader",
      "css-loader?localIdentName=[path][name]__[local]___[hash:base64:5]",
      "autoprefixer?browsers=last 2 version&remove=false"
    ]
  },

  {
    test: /.use(able)?.css$/,
    loaders: [
      "style-loader/useable",
      "css-loader?localIdentName=[path][name]__[local]___[hash:base64:5]",
      "autoprefixer?browsers=last 2 version&remove=false"
    ]
  },

  {
    test: /.mod.css$/,
    loaders: [
      "style-loader",
      "css-loader?modules&localIdentName=[path][name]__[local]___[hash:base64:5]",
      "autoprefixer?browsers=last 2 version&remove=false"
    ]
  },

  // .less, .mod.less, .useable.less
  {
    test: /.less$/,
    exclude: [
      /.mod.less$/,
      /.use(able)?.less$/
    ],
    loaders: [
      "style-loader",
      "css-loader?localIdentName=[path][name]__[local]___[hash:base64:5]",
      "autoprefixer?browsers=last 2 version&remove=false",
      "less-loader"
    ]
  },

  {
    test: /.use(able)?.less$/,
    loaders: [
      "style-loader/useable",
      "css-loader?localIdentName=[path][name]__[local]___[hash:base64:5]",
      "autoprefixer?browsers=last 2 version&remove=false",
      "less-loader"
    ]
  },

  {
    test: /.mod.less$/,
    loaders: [
      "style-loader",
      "css-loader?modules&localIdentName=[path][name]__[local]___[hash:base64:5]",
      "autoprefixer?browsers=last 2 version&remove=false",
      "less-loader"
    ]
  },

  // 其他資源
  {
    test: /.(jpeg|jpg|png|gif)$/,
    loader: "url-loader?limit=10240"
  },
  {
    test: /.html$/,
    loader: "html-loader"
  },
  {
    test: /.json$/, loader: "json-loader"
  },
  {
    test: /.woff(?.+)?$/, loader: "url?limit=10000&mimetype=application/font-woff"
  },
  {
    test: /.woff2(?.+)?$/, loader: "url?limit=10000&mimetype=application/font-woff"
  },
  {
    test: /.ttf(?.+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream"
  },
  {
    test: /.eot(?.+)?$/, loader: "file"
  },
  {
    test: /.svg(?.+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml"
  }
]

適用于

適用于一些小型項目或者demo的快速搭建開發。
只需要執行gojs,就可以直接看到demo啦!

預覽

效果預覽(愛奇藝)

效果預覽(Youtube)

最后,歡迎各位 star!

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/90625.html

相關文章

  • 告別webpack react 搭建多頁面之痛

    摘要:搭建多頁面應用在往下看之前請確保先上個涼的吃著目錄結構編譯結果配置文件腳本存放處項目開發中一些常用的方法主要存放和請求有關的靜態文件模版文件項目開發中一些常用的方法其實我覺得可以和放在一塊,但是個人習慣還是分開啦開始擼代碼如何創建多頁面應用 webpack4 搭建 react 多頁面應用 在往下看之前請確保nodejs > 8.X 先上個涼的吃著 目錄結構 . ├── dist ...

    seanHai 評論0 收藏0
  • Byemess-基于React&redux在線Todo應用

    摘要:在線注冊賬號,數據存儲于。年了,還不使用的異步控制體系。過度對數據模型進行裝飾的結果便是高耦合,這跟我初衷是基于在線存儲數據有關。 為什么又是Todo,全世界的初學者都在做todo嗎?可能很多人要問這句話,其實這句話可以等同于: 為什么你做了個云音樂播放器? 為什么你做了個新聞閱讀APP? 為什么你做了個VUE/REACT版本的CNODE? 究其本質,這幾個應用都是data-map...

    MRZYD 評論0 收藏0
  • 手摸手,帶你用vue后臺 系列五(v4.0新版本)

    摘要:同時增加了單元測試,使用了,增加了可視化配置權限,增加了自定義布局等等,優化了原先的權限方案,支持不刷新頁面更新路由等等功能。雖然它的初衷是為了單元測試的,但正好滿足了我們的需求。它會重寫瀏覽器的對象,從而才能攔截所有請求,代理到本地。 前言 vue-element-admin 從 2017.04.17提交第一個 commit 以來,維護至今已經有兩年多的時間了了,發布了四十多個版本,...

    MonoLog 評論0 收藏0
  • 手摸手,帶你用vue后臺 系列五(v4.0新版本)

    摘要:同時增加了單元測試,使用了,增加了可視化配置權限,增加了自定義布局等等,優化了原先的權限方案,支持不刷新頁面更新路由等等功能。雖然它的初衷是為了單元測試的,但正好滿足了我們的需求。它會重寫瀏覽器的對象,從而才能攔截所有請求,代理到本地。前言 vue-element-admin 從 2017.04.17提交第一個 commit 以來,維護至今已經有兩年多的時間了了,發布了四十多個版本,收獲了三...

    graf 評論0 收藏0

發表評論

0條評論

gghyoo

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<