JS 脚本打包

借助 JS 打包工具, 可以完成很多额外的工作, 比如 ES 版本兼容性/编译/混淆/拼接等等.

脚本打包不是必须的, 可以在工程中以源码方式直接手工编写 JS 源文件.

webpack

示例项目中已经预先配置了一个 webpack.config.js 配置以供参考, 通过此配置可以一步完成以下操作:

• typescript 编译
• javascript 合并
• 复制到 resources 目录并重命名 .txt

// webpack.config.js

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    entry: {
        index: './Assets/Examples/Scripts/src/main.ts'
    },
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, './Assets/Examples/Scripts/dist')
    },
    module: {
        rules: [{
            test: /\.tsx?$/, 
            parser: { amd: false, system: false } ,
            use: 'ts-loader', 
            // use: 'awesome-typescript-loader', 
            exclude: /node_modules/
        }]
    }, 
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    mode: 'development', 
    plugins: [
        new CleanWebpackPlugin(), 
        new CopyWebpackPlugin({patterns: [{
            from: path.resolve(__dirname, './Assets/Examples/Scripts/dist'), 
            to: path.resolve(__dirname, './Assets/Examples/Resources/dist'), 
            transformPath: (targetPath, absolutePath) => {
                return targetPath + ".txt";
            }, 
            toType: "dir"
        }, {
            from: path.resolve(__dirname, './Assets/Examples/Scripts/config'), 
            to: path.resolve(__dirname, './Assets/Examples/Resources/config'), 
            transformPath: (targetPath, absolutePath) => {
                return targetPath + ".txt";
            }, 
            toType: "dir"
        }]})
    ]
}

// package.json
// ...
"scripts": {
    "dev": "webpack --watch",
    "build": "webpack"
}

# 持续监听 typescript 变化并自动编译打包
npm run dev

# 单次编译打包
npm run build

gulp

示例项目中已经预先配置了一个 gulpfile.js 配置以供参考.