angularjs - 如何从使用 <script> 的导入迁移到模块 bundler ？

Question

我有一个使用 Angular 的项目。它不使用任务管理器或依赖管理器，所有库都存储在 repo 中，并使用普通的旧 <script> 包含在内标签喜欢 <script src="libs/angular/angular.min.js"></script> .

我想通过引入模块捆绑器和自动化构建过程来使应用程序现代化。最初的想法是 gulp + bower，但我看到 webpack + npm3 现在是一种趋势。

gulp + bower 没有问题，因为 gulp-inject ，但我找不到与 webpack 类似的东西。

是否有任何工具可以让我按原样使用现有代码并使用 webpack 只编写新模块？

Answer 1

这是我到目前为止的解决方案。由于 webpack 每个包需要一个入口点，我仍然必须将所有这些旧版 js 导入一个文件中。所以我决定使用 ES6 import (或 webpack 的要求)在名为 index.js 的入口点中

这是 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 中需要 angular，但是使用这个插件，webpack 将处理这个问题并仅在 vendor.js 中添加 js 代码