如何使用<script>從進口遷移到模塊打包機？

我有一個使用Angular的項目。它不使用任務管理器或依賴關係管理器，所有庫都存儲在回購庫中，並使用像<script src="libs/angular/angular.min.js"></script>這樣的普通舊<script>標籤進行包含。如何使用<script>從進口遷移到模塊打包機？

我想要通過引入模塊打包器和自動構建過程來實現應用程序的現代化。最初的想法是吞嚥+涼亭，但我發現webpack + npm3現在是一種趨勢。

因爲諸如gulp-inject之類的東西，gulp + bower沒有問題，但是我找不到任何類似於webpack的東西。

是否有任何工具可以讓我使用現有的代碼，並且只使用webpack編寫新模塊？

來源

2016-09-23 ikryvorotenko

這是不是很清楚你在這裏想問什麼。「請分享你的想法/經驗」不是一個問題，問題的主體看起來像你試圖尋求一步一步的指導，這不是這個網站的目的。 – Claies

@Claies我正在尋找一種特定的解決方案，它可以讓我開始使用模塊打包器，但保留所有遺留代碼，無需進行任何重大更改。我相信有人已經使用任何遺留系統來做這件事，這就是爲什麼我要求共享經驗。 – ikryvorotenko

所以你需要的是一個像webpack-module-bundler這樣的模塊捆綁器，以便與gulp一起使用？ –

-1

這是我到目前爲止的解決方案。由於webpack需要每個bundle有一個入口點，我仍然需要將所有這些傳統的js導入到一個文件中。所以我決定在入口點叫index.js

使用ES6 import（或的WebPack的要求），這裏的的WebPack配置看起來像

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

var basePath = __dirname + "/target/app"; 
module.exports = { 
    context: basePath, 
    entry: { 
     app: './index.js', 
     vendor: './vendor.js' 
    }, 
    output: { 
     path: basePath + "/build", 
     filename: '[name].js' 
    }, 
    module: { 
     loaders: [ 
      {test: /\.js$/, loader: 'babel?presets=es2015', exclude: /node_modules/}, 
     ] 
    }, 
    plugins: [ 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'vendor' 
     }), 
     new webpack.ProvidePlugin({ 
      "$": "jquery", 
      "jQuery": "jquery", 
      "window.jQuery": "jquery", 
      "_": "lodash" 
     }), 
    ], 
};

等在index.js我沒有以下

import './app/component1.js' 
import './app/component2.js' 
//all the rest imports from index.html

至於第三方庫如jquery，angular等...我決定在單獨的包中描述導入，因此還有另一個包叫做vendor.js

import './libs/lodash.js' 
import './libs/jquery.js' 
//and all the rest libraries 
//note that here we can use now libs from npm node_modules like 
import 'angular' //will take angular from node_modules/angular

我而這樣做面臨重要的事情，是傳統的模塊是不會因爲使用像$，_等全局變量的WebPack真正兼容... ProvidePlugin在這裏幫助，並添加require({module})的模塊，其中提供{variable}，因爲它在配置描述真實'variable': 'module'

注意我用CommonsChunkPlugin，以避免在這兩個具有捆紮機從屬模塊滿足，像角需要在index.js和vendor.js但這個插件的WebPack將處理該並添加JS code only only in vendor.js

來源

2016-10-04 12:26:04 ikryvorotenko

如何使用<script>從進口遷移到模塊打包機？

回答

相關問題