通过JavaScript使用Web版SDK

最終更新： 2020年1月30日

此页面将说明从JavaScript的webpack项目使用Cubism 4 SDK for Web的Framework的步骤。

将所需文件追加到现有JavaScript的webpack项目中

将以下目录从Cubism 4 SDK for Web复制到项目中。

• Core文件夹
• Framework文件夹

将包追加到现有项目

在现有JavaScript的webpack项目中，追加 ts-loader 包来构建TypeScript。

在项目中输入以下命令，将包追加到 package.json 。

npm install --save-dev ts-loader

变更现有项目的webpack设置

进行一些追加设置以允许现有JavaScript的webpack项目构建Framework。

首先，设置以下内容，以将TypeScript文件追加到webpack的构建对象中。

module.exports = {
  ...
  resolve: {
    extensions: ['.ts', '.js']
  } ... }

接下来，webpack将追加以下设置，以在构建时转变TypeScript。

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /.ts$/,
        exclude: /node_modules/,
        loader: 'ts-loader'
      }
    ]
  }
  ...
}

现在您可以正常构建webpack了。

下面是webpack.config.js的范例。

var path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/dist/'
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /.ts$/,
        exclude: /node_modules/,
        loader: 'ts-loader'
      }
    ]
  }
}

从JavaScript使用Framework

这是一种从JavaScript使用TypeScript框架的方法。

在import并使用要使用的模块时，编写如下。

import { Live2DCubismFramework } from "../../../../Framework/live2dcubismframework";

Live2DCubismFramework.CubismFramework.CubismFramework.startup();

在框架中载入类

由于框架包装在名称空间Live2DCubismFramework中，因此多次import将导致重复。
要解决重复，需要在import时指定不同的名称，可以通过在import时名称空间后指定 as [任意名称] 来解决。

此外，您可以通过编写import [任意名称] = 模块名称 ，以不同名称定义内部模块。

import { Live2DCubismFramework as live2dcubismframework } from '../../../../Framework/live2dcubismframework';
import CubismFramework = live2dcubismframework.CubismFramework;

CubismFramework.startup();